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

css

a[target="_blank"]::after content: "";width: 11px;height: 11px;margin-left: 4px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");background-position: center;background-repeat: no-repeat;background-size: contain;display: inline-block;

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:

css

a[href^="https://example.com"]::after display: none !important;

The CSS examples above are to be used within the

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.   https://hollandsweb.com/css-tutorial-2-add-an-icon-to-external-links/?feed_id=196&_unique_id=652fd7433ea79