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 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