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.

Answer 2

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.