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.