Michael Gearon

CSS How to Style External Links

Michael Gearon ยท

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.


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^="//"]:not([href*="mysite.com"]), {
/* shorter version! */
a[href*="//"]:not([href*="mywebsite.co.uk"]) {
    /* external link styles, use :before or :after if you want! */


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 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.