CSS: Style external links

I combined @superlogical + @Shaz to make something for my Foundation WP theme...

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

You can use this HTML snippet to test on your site:

<a href="http://gebfire.com" target="_blank">External</a>

This is what I used for a custom image (like a favicon)

a[href^="http://"]:not([href*="magew.com"]):after {
     content: " " url('/wp-content/uploads/2014/03/favicon.png');    
}

This way shows external links ALA Wikipedia:

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

​An example can be found here: http://jsfiddle.net/ZkbKp/

2021 Solution

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

2014 Solution

Using some special CSS syntax you can easily do this. Here is one way that should work for both the HTTP and HTTPS protocols:

a[href^="http://"]:not([href*="stackoverflow.com"]):after,
a[href^="https://"]:not([href*="stackoverflow.com"]):after {
  content: '↗️';
}

One simple rule, no hardcoding involved:

a[href*="//"] { /* make me do stuff */ }

Works for all schemes. Has the added benefit of identifing mistyped internal URLs. For cloaked internal links redirecting externally, simply prefix the relative URL with //.

Credit goes to Mark Battistella who left this snippet on CSS-Tricks in 2012.

Update: Based on actual use I've personally found the above problematic as it styles all absolute links which can lead to unexpected styling in some situations (e.g. In Brave, when you download a page for offline viewing). My suggestion is to use a[rel*="external"]::after instead and decorate your external links.