How to add icons to external links with CSS

As part of my ongoing updates to my personal site, I decided to add icons after all external links. Today, I wanted to show you how I did it. Let’s dig in! Why? I do a lot of linking on my site, and it’s not always obvious when a link will keep you on-site vs. take you somewhere else. Using [target="_blank"] forces links to open in a new tab or window, but this is considered an anti-pattern for accessibility reasons. It can be confusing, and it robs users or choice and agency. An icon lets them make an informed decision. Rather than manually adding a link to every external link, I figured out how to target all links that point to an external page and add an icon with CSS instead. Targeting external links with CSS Modern CSS makes this possible! I want to target… Links that start with http (not relative links that point to the current site), and Do not have the .btn class (the class I use to style links as buttons), and Do not have an SVG icon inside them already, and Do not have my…