[SOLVED] Preventing certain URLs from receiving external link styles

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

Solution

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

a[href^="http://www"],
a[href^="https://www"]

OR, more simply

a[href^="http"]

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

a[href^="http://www"]::after,
a[href^="https://www"]::after

... 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 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 !important;
    padding-left: 0 !important;
}

Two general solutions to hide external styles on anchor elements are:

Create a class for this purpose:

.no-external-link-icon {
    background-image: none !important;
    padding-left: 0 !important;
}

Use scheme-less (or protocol-less) URLs:
```
//www.stackoverflow.com
```