CSS: Style external links

Question

I want to style all external links in my website (Wordpress). I'm trying with:

.post p a[href^="http://"]:after 

But Wordpress put the entire url in the links... So, how could I style all links that doesn't start with http://www.mywebsite.com ?

Thank you.

Answer 1

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: '↗️'; } 

Answer 2

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/