Michael Gearon

CSS How to Style External Links

Michael Gearon

Last updated on

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

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.