Add an icon to external links

If you want to add an icon to `a` element that links to an external website, then you can depend on the `href` or `[target="_blank"]` attribute.

The target attribute

a[target='_blank'] {
    align-items: center;
    display: flex;
}
a[target='_blank']:after {
    /* The icon can be a SVG or image file */
    content: url(/link/to/icon.svg);
    margin-left: 0.25rem;
}

The `content` property can be a string that appends to the link:

a[target='_blank']:after {
    content: ' (external)';
}

Using an icon font such as Font Awesome is another option:

a[target='_blank']:after {
    content: ' \f08e';
    font-family: 'FontAwesome';
}

The href attribute

This approach relies on the `href` attribute. A link is treated as external if

It doesn't match with the domain of website
It isn't an anchor (doesn't start with `#`)
It doesn't start with `/`

It's up to you to define more conditions here. But with the set of conditions above, the `:after` looks like

a:not([href*='domain.com']):not([href^='#']):not([href^='/']):after {
    /* Set the `content` property as mentioned in the first approach */
}

Demo

Add an icon to external links

Add an icon to external links

The target attribute

The href attribute

Demo

See also