CSS How to Style External Links

Michael Gearon

Last updated on November 16, 2022

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 for styling links that are not your domain

What the below snippet of code does is compare links with the website address (mywebsite.co.uk) and if it is not similar then style it is this way. We can replace the “mywebsite.co.uk” with any website address we want to compare it against.

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

Let’s take a look an example, we will create two links, one that goes to our external website (BBC website) and another that goes to our CodePen example. We will then use the not pseudo-class to say not the domain codepen.io then within that declaration we will add our rules to style the external links.

a[href*="//"]:not([href*="codepen.io"]){
 background-color: #3FA09D;
}

a{
  background-color: #F26522;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 4px;
}

The result is that all links that are not linking to codepen.io will be in a blue background, and those that are will be in an orange colour, example shown below.

Example

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

First published on March 7, 2016