Highlighting External Links Using CSS

I was talking with a coworker about a requirement to highlight links to external site on our product. While we were talking, I started wondering if you could achieve this just using a CSS change using pseudo-selectors… and after a few seconds in codepen I came up with this:
If a link’s href
attribute doesn’t begin with a /
(basically isn’t an
relative link) then it assumes that the link is external and adds a cute link
emoji. 👍
a:not([href^="/"]):after {
content: "🔗";
}
I’m not the first person to realize this… it seems like wikipedia has been doing this for a while and David Walsh has a great post on this with some nicer rules.
Changelog
-
2020-06-18 19:26:02 +0000
Move everything to CST
Don't know why I didn't do that before. It caused _no_ end of
problems. -
2019-07-16 13:32:19 +0000
Quick Post: Highlighting external links using CSS