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.
Hacker News (Newest) files mainly under programming. We currently carry 5,306 of its stories.
Story provenance
Source · retrieval · rights · ranking — open for full record
inspect →
Attribution is not the same as permission. This drawer separates discovery metadata, excerpts, WeSearch-generated summaries, reuse status, and whether the publisher receives the visit. Nothing here claims a legal grant the publisher has not made.
Record
| Original publisher | Gomakethings |
| Canonical URL | https://gomakethings.com/articles/how-to-add-icons-to-external-links-with-css/ |
| Publication time | Fri, 29 May 2026 13:15:02 +0000 |
| Retrieval time | 2026-05-29T13:20:00.413Z |
| Last seen | 2026-05-29T13:20:00.413Z |
| Headline source | Publisher (no WeSearch rewrite) |
| Excerpt source | publisher body |
| Excerpt method | First ~120 words (~800 chars) of extracted publisher body, fair-use limited. |
| Summary | WeSearch · cerebras-chat (WeSearch summarizer) |
| Summary source text | contentText |
| Citation coverage | Summary is a WeSearch-generated derivative; primary citation is the original publisher URL. |
| Cluster | tsxhfunSGF-Q |
| Cluster logic | Grouped by semantic title/content similarity across sources within a rolling window. Same-publisher template collisions are excluded from coverage comparison. |
| Ranking reason | Story pages are not engagement-ranked. Hub feeds use recency, with optional source-diversified chronological ordering (cap consecutive stories per source). No personalized ranking. |
| Publisher visit | Yes — open original |
| Substitutes article? | No — link-out required for full text |
Rights status (four layers)
WeSearch handling by dimension
| Indexing | May the item be indexed (stored, ranked, made findable)? | Allowed |
| Snippet | May a short excerpt of the publisher's text be shown? | Allowed |
| AI summary | May WeSearch generate its own short summary of the article? | Limited |
| Retrieval / RAG | May the content be exposed for third-party retrieval-augmented generation? | Not asserted |
| Model training | May the content be used to train AI models? | Not asserted |
| Commercial reuse | May the content be reused commercially? | Not permitted |
Basis: Derived from the published RSS/Atom feed. Contact: [email protected]. Reviewed: 2026-07-24.
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
