CSS to Style External Links

This is quick one.

While changing the fonts on my website, I wanted to make an indicator of when a link goes to an external page.

Since I use "/page" links for pages that are on my website, the selector was pretty easy to create:

a[href*="https://"]::after {
	content: " ↗";
}

This just looks for any <a> tag with an external link, and adds a unicode arrow to the end.

However, this first iteration had some issues. Firstly, I do have some links (particularly microformat ones, that use the full site name. And second, this style put arrows on any ".card"classes I had that were links. Which made them use particularly ugly. Luckily, we have the :not selector.

a[href*="https://"]:not(.card, [href*="jdaumeyer.com"])::after {
	content: " ↗";
}

Et Voila! We have arrows on all external links, except the ones that make them look ugly.