External Links with CSS3 or jQuery

Here’s how I marked external links using CSS throughout my blog with a few simple selectors one of which is a level 3 meaning this solution will probably fail in some version of IE and other browsers with limited CSS3 support.

a {
    background: url('https://konstantin.blog/core/wp-content/themes/publish/images/external-link.png') right center no-repeat;
    padding-right: 14px;
}

a[href^="https://konstantin.blog"], a[href^="/"], a[href^="#"] {
    background: none;
    padding-right: inherit;
}

The first one selects all the links on the page, gives them the external link icon and a padding on the right. The second selector fetches all links that begin with my domain name, relative links and empty links and then removes the background and padding set by the first selector.

This solution might need a few tweaks depending on your linking structure and perhaps a fallback stylesheet for browsers with no CSS3 support. Another option can be jQuery, somewhere in your head section after jQuery has been loaded:

jQuery(document).ready(function($) {
    $.expr[':'].external = function(obj) {
        return !obj.href.match(/^mailto:/) && (obj.hostname != location.hostname);
    };
    $('a:external').addClass('external');
});

Which would add an external class name to all links where hosts don’t match the current host, and then use the a.external selector to style your external links as shown in the example earlier. This solution will “blink” though because jQuery has to first load and initialize before it can read all the contents of your page. It’s a matter of milliseconds so most people won’t mind. Enjoy!