How to add icons to external links with CSS
The article discusses how to add icons to external links using CSS. It explains the importance of indicating external links for user awareness and accessibility. The author provides a step-by-step guide on targeting external links and adding icons efficiently with CSS techniques.
- ▪The author aims to enhance user experience by visually indicating external links on their personal site.
- ▪CSS techniques such as the starts-with attribute selector and pseudo-classes are utilized to target external links.
- ▪The article includes detailed code snippets for implementing the icon addition effectively.
Opening excerpt (first ~120 words) tap to expand
May 28, 2026 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.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at Gomakethings.
Discussion
0 commentsMore from Gomakethings
