1. External links

Styling external links can be done in several ways. One way to do this is by adding an extra class to all the external links. This is cumbersome and unnecessary since this can be done very easily by only using CSS.

Let’s take a look at the following selector.

a[href*="//"]:not([href*="yourwebsite.com"]) {
  /* Apply style here */
}

This CSS selector takes all a tags which href attribute contains two forward slashes (to filter out relative URLs) and which doesn’t contain the URL of your website.

That’s easy, right?!

This selector often gets combined with a before or after pseudo-element where the pseudo-element contains an icon most of the time. See the following example.

In the example above all external links have a before pseudo-element that adds an external link icon in front of the link.