Css: Style External Links

a[href]:not(:where(
  /* exclude hash only links */
  [href^="#"],
  /* exclude relative but not double slash only links */
  [href^="/"]:not([href^="//"]),
  /* domains to exclude */
  [href*="//stackoverflow.com"],
  /* subdomains to exclude */
  [href*="//meta.stackoverflow.com"],
)):after {
  content: '↗️';
}

<strong>Internal sites:</strong>
<br>Lorem <a href="http://stackoverflow.com">http://stackoverflow.com</a> ipsum
<br>Lorem <a href="/a/5379820">/a/5379820</a> ipsum
<br>Lorem <a href="//stackoverflow.com/a/5379820">//stackoverflow.com/a/5379820</a> ipsum
<br>Lorem <a href="http://stackoverflow.com/a/5379820">http://stackoverflow.com/a/5379820</a> ipsum
<br>Lorem <a href="https://stackoverflow.com/a/5379820">https://stackoverflow.com/a/5379820</a> ipsum
<br>Lorem <a href="https://meta.stackoverflow.com/">https://meta.stackoverflow.com/</a> ipsum
<br>Lorem <a href="ftp://stackoverflow.com">ftp://stackoverflow.com</a> ipsum

<br><br>
<strong>External sites:</strong>
<br>Lorem <a href="ftp://google.com">ftp://google.com</a> ipsum
<br>Lorem <a href="https://google.com">https://google.com</a> ipsum
<br>Lorem <a href="http://google.com">http://google.com</a> ipsum
<br>Lorem <a href="https://www.google.com/search?q=stackoverflow">https://www.google.com/search?q=stackoverflow</a>
<br>Lorem <a href="//www.google.com/search?q=stackoverflow">//www.google.com/search?q=stackoverflow</a>

<br><br>
<strong>Other anchor types</strong>
<br>Lorem <a>no-href</a> ipsum
<br>Lorem <a href="#hash">#hash</a> ipsum

Is it possible to style external HTML links differently to relative links using CSS alone?

In addition to showdev's answer, I believe the following is the most accurate selector that works on today's browsers:

a[href*='//']{
    /* ... */
}

This takes care of different protocols (think http:// vs https://).

Note that, for this to work, you must use relative URLs for all of your local links. So http://example.com/stuff will be treated as external even if your website is in the example.com domain.

CSS: Style and color external links

You can use the same attribute select, and style the a element with red color:

a[href ^= "http"] {  color: red;}
a[href ^= "http"]::after {     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    }

<a href="/cats">Internal</a>
<a href="https://www.stackoverflow.com">Internal</a>

How can I style external links like Wikipedia?

demo

Basics

Using :after we can inject content after each matched selector.

The first selector matches any href attribute starting with //. This is for links that keep the same protocol (http or https) as the current page.

a[href^="//"]:after, 

These are the traditionally more common urls, like http://google.com and https://encrypted.google.com

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

We can then pass a url to the content attribute to display the image after the link. The margin can be customized to fit the

  content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
  margin: 0 0 0 5px;
}

Allow certain domains as local

Let's say we're on example.org and we want to mark links to blog.example.org as on the same domain for this purpose. This is a fairly safe way to do it, however we could have a url like http://example.org/page//blog.example.org/

note: make sure this comes after the above in your styles

a[href*="//blog.example.org/"]:after {
  content: '';
  margin: 0;
}

For more strict matching, we can take our initial settings and override them.

a[href^="//blog.example.org/"]:after, 
a[href^="http://blog.example.org/"]:after, 
a[href^="https://blog.example.org/"]:after {
  content: '';
  margin: 0;
}

HTML not linking to external CSS stylesheet

This media query in your code:

@media (max-device-width: 640px) and (min-device-width: 320px) { ...

...is opened, but never closed. (i.e. the closing } bracket is missing)

Due to that the subsequent media query @media (max-width: 699px) {... is even nested in the previous one (which, as said, is never closed), which can only cause erratic results - if any.

So all the rules following @media (max-device-width: 640px) and (min-device-width: 320px) { ... only apply to smaller screens widths (i.e. mobile devices) or even not at all.

Fix the closing brackets of the media queries as you intend them and you should be set.

Preventing certain URLs from receiving external link styles

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:

1. Create a class for this purpose:

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

2. Use scheme-less (or protocol-less) URLs:

   //www.stackoverflow.com
   

---

Related Topics