Suppose you have lots of links on a page. You want to highlight the ones which point to example.com - is that possible in CSS without using JavaScript?
Yes!
This scrap of code will turn all those links red:
CSS
a[href^="https://example.com"] { color: red; }
Now, there are a few gotchas with this code.
- It matches the string
exactly. So
https://example.comwill not matchhttps://www.example.com - The match will occur at the start of the string.
To match more lazily, you can use a substring match:
a[href*="example.com"] { color: red; }
That will match www.example.com as well - but it will also match https://wikipedia.org/wiki/example.com
Is this useful?
I use it to ensure all the links which point to the Internet Archive are properly labelled:
a[href^="https://web.archive.org"]::after { content: " (archived)"; vertical-align: super; font-size: .9em; }
For example, this link points to the earliest version of my website.
You could also use it to indicate when a link takes you to a specific filetype (note, this may need to be case insensitive:
/* URl ends with .pdf or .PDF */ a[href$=".pdf" i]::after { content: " (PDF)"; vertical-align: super; font-size: .9em; }
It is also possible to add something to show people are leaving this site:
a[href]:not([href^="https://shkspr.mobi" i]) { content: "↗️"; }
7 thoughts on “Styling links based on their destination”
@Edent, I remember from Wikipedia (I ran my website with wiki at some point) that this was how they differentiates internal and external links.
| Reply to original comment on mstdn.social
Oh that's very nifty. Didn't know you could do that.
| Reply to original comment on bsky.app
@Edent Might be an interesting read for you: https://gwern.net/design-graveyard#link-icon-css-regexps
Design Graveyard
| Reply to original comment on fedi.vale.rocks
@Edent
I think styling links based on their destination is seldom useful and have some accessibility challenges.
The external link example is missing `::after` but it would add the name of the Unicode character, "Northeast arrow with variation selector 16," to those links, pretty annoying for a screen reader user.
All major browsers now support alternative text in `content` but that's new so a fallback is called for.
https://caniuse.com/mdn-css_properties_content_alt_text
| Reply to original comment on c.im
I do something similar on my website to denote links that open in a new tab (which I use to denote "external" links). I use an SVG icon, though this is less accessible than some of the other comments I'm seeing here.
@Edent I use this for transparency with Amazon affiliate links, and for a subtle differentiation of brittle external links (`a { border-bottom: 1px #369 dotted; } and stable internal links (`a[href^="/"] { border-bottom: 1px #369 solid; }`).
| Reply to original comment on social.eden.one
I did that years ago for links to PDFs on the RCP London website of the day, because I wanted it to happen automatically via CSS rather than be something I had to manually sort out. I never thought about using it to style web archive (etc) links though. That’s a very neat idea.
More comments on Mastodon.