← #23 Style broken images

Add an icon to external links

Topics: CSS

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 */



Fix a typo or suggest an improvement
#25 Copy a long variable from the Console