CSS How to Style External Links

Written by Michael Gearon on the

Last updated 07

Styling an external links is a nice visual indictor for users that if they click the link they will be taken to another website. This is particularly useful for websites that have reference links such as Wikipedia.

CSS

What the below snippet does is compare links with the website address (mywebsite.co.uk) and if it is not similar then style it is this way. Replace the “mywebsite.co.uk” with your website address.

/* long version */
a[href^="http://"]:not([href*="mywebsite.co.uk"]),
a[href^="https://"]:not([href*="mywebsite.co.uk"]), 
a[href^="//"]:not([href*="mysite.com"]), {
    
}
/* shorter version! */
a[href*="//"]:not([href*="mywebsite.co.uk"]) {
    /* external link styles, use :before or :after if you want! */
}

Example

See the Pen CSS How to Style External Links by Michael Gearon (@michaelgearon) on CodePen.0

Written by Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.

So now what?

Let's chat, and get things going