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

Answer 1

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)" 
}

You can view an example styling of external links.