← #23 Style broken images
#24

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

Demo

More

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