Prevent specific URLs from getting external link styles

Question

I developed any external links on my site to automatically add an icon after linking to any domain from 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 a page that opens a lightbox with a Google Map in it, so the above code considers it an external link and adds an icon after the image. Is there a way to basically tell links from anotherdomain.com not to apply a style?

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

Any help would be greatly appreciated! Thanks in advance!

Answer 1

, https://, . https://.

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

,

a[href^="http"]

---

, , , , , , www.

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

... (, your anotherdomain.com maps.google.com) .

, , , , WWW (, meta.stackexchange.com)

---

- :

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

,

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

---

:

• :

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

• URL- ( ):

  //www.stackoverflow.com
  

Answer 2

:matches, , , , ( ).

a[href^="http://"]:after { 
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px;
}

a[href^="http://"]:matches([href*="website.com"], [href*="otherwebsite.com"]):after { 
 }

. .

Answer 3

:not OR, .

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

/* Demo purposes only */
a {display:inline-block;text-decoration:none!important;padding:0.75em;color:inherit!important;border:1px solid}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
<a href="http://website.com">My Website</a>
<a href="http://google.com">Google</a>
<a href="http://facebook.com">Facebook</a>
<a href="http://maps.google.com">Google Maps</a>

Hide result