Displaying an External Link Icon Using CSS - (Archived)

Letting your visitors know that a link leads away from the site they’re currently on can be a great practice to adopt. If you want to display a small icon at the end of every external link on your website, without having to add a class like “external” to your a hrefs, there’s another option we can take.

For all links, we can add the below. We’ll get to removing the icon on the current site later.

a[href^="https://"]:after,
a[href^="http://"]:after {
    font-family: FontAwesome;
    content: "";
    margin-left: 4px;
}

Now, keep in mind that attribute selectors like this can be fairly heavy CSS, so it’s not always advisable. But it can still beat other methods in terms of speed, so as long as your CSS is nice and clean overall, it really should pose zero problems.

In content, I’ve added a FontAwesome icon. If you’d rather use an image, which will again be slower unless you add it to your existing sprites, remove the quotations and then add the link to your image within. Example:

   content: url(/images/externalicon.png);

For more flexibility, you can use background image instead, as this icon can’t be resized when using content in this manner.

To remove the icon from internal links:

a[href^="https://www.example.com"]:after  {
    content: "";
    margin-left: 0;
}

Since the sites I run tend to use SSL exclusively, I’ve added only the https version. Make sure to change the site name to the site in question.