CSS Tutorial #2- Add An Icon to External Links

For technical documentation, blogs, and articles, it’s usually a good idea to distinguish between a link within a site (internal) and a link to another site (external), because while reading a blog or technical documentation, clicking a link and accidentally redirecting to an external site.

A nice UX pattern is to display an “external link” icon next to external links. There is a simple way to implement this is using CSS. In CSS, the attribute value selector allows you to select elements based on the value of an attribute. It follows the syntax [attribute=value], where “attribute” is the name of the attribute you want to target, and “value” is the specific value you want to match. Here’s an example:

Add An Icon to External Links

If you’d like to exclude certain domains from displaying the icon (for example subdomains) you can set the icon to be hidden with something like:

The CSS examples above are to be used within the <article> section of a page and aren’t intended for navbars, footers, or elsewhere where the font size and colors may differ – where automating the appearance of these links may not be appropriate. The icon used in the example above is Bootstrap’s ‘box arrow up-right’ icon, but feel free to switch to something else such as Font Awesome’s External-Link-Alt’ icon. I used the neat URL-encoder for SVG service to convert the SVG code.