Tyler Henson Tyler Henson - 6 months ago 13
CSS Question

Preventing certain URLs from receiving external link styles

I have styled any external links on my site to automatically add an icon after the link to any domain off my site using:

a[href^="http://"]:not([href*="website.com"]):after {
font-family: "FontAwesome";
content: "\f08e";
font-size: 10px;
padding-left: 2px;

I have an image on the page that opens a lightbox with a Google Map in it, so the above code thinks it's an external link and adds the icon after the image. Is there a way to basically say links from anotherdomain.com, don't apply the style?

I tried adding maps.google.com to the option above, but it didn't work. I'm not sure if it supports multiple values?

Any help would be greatly appreciated! Thanks in advance!!


First, with most sites going the https:// direction, you may want to adjust your selector. Or consider adding an https:// option.

One method that I use to distinguish between links needing the external link icon, and those that do not, is making sure that external links on my sites have a www.


... any other links (like your anotherdomain.com or maps.google.com) wouldn't match.

I say this is only one method because you still have to look out for websites needing the external link styles that don't have a www (e.g., meta.stackexchange.com)

Another option is to simply override your original rule:

a[href*="maps.google.com"] { ... !important ; }

OR, more specifically in this case

a[href*="maps.google.com"]::after { font-size: 0; padding-left: 0; !important }