CSS: Style external links

css url css-selectors uri href

thom · Mar 21, 2011 · Viewed 14.3k times · Source

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

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*="example.com"]):after,
a[href^="https://"]:not([href*="example.com"]):after{
    content: " (EXTERNAL)" 
}