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
  • 2022-06-08 11:31:29 -0500
    Rename articles

  • 2020-06-18 14:26:02 -0500
    Move everything to CST

    Don't know why I didn't do that before. It caused _no_ end of
    problems.

  • 2019-07-16 08:32:19 -0500
    Quick Post: Highlighting external links using CSS