Tutorial: how to display icons for external links using CSS only

In this tutorial you will learn a neat trick that allows you to display an icon after each external link with CSS only.

Tutorial: how to create icons for external links with pure CSS

Use case

In this blog every external link is followed by an icon that indicates that it is an external link.
In WordPress this is often accomplished by installing a plugin.

In Blogger or other platforms admins don't get spoiled with plugins so much as in WordPress. While getting spoiled with plugins sounds nice, it has some distinct disadvantages:

you tend to just search for an appropriate plugin and not consider other possibilities that may be better or faster,
the more plugins you install, the more maintenance you will need to do (install security updates and check if the plugin is still maintained and does not conflict with other plugins),
the more plugins you install, the slower your website will eventually get,
you make your website or blog dependent on code that you have no control over other than disabling it.

Don't get me wrong: plugins are a godsend. I use them all the time in my WordPress websites and even a few in this one. However, showing an icon after an external link can easily be accomplished with CSS only.

Prerequisites

What you need:

an icon, obviously. You can find many websites that offer icons. My website of choice is flaticon.com. They offer hundreds of thousands of flat vector icons, most of which are free to use if you credit the author. And if you're handy, you can pretty easily create a simple icon yourself,
a graphics editor to resize the icon in case it is too large. I am on Windows and I can highly recommend Paint.NET. You can also use programs like GIMP or Pinta if you're on Windows, Linux or macOS,
a way to optimize the icon file's size. You don't want an icon like this to be over 1k. Ideally, it should be somewhere between 400 and 500 bytes. To achieve this, I use RIOT (Radical Image Optimization Tool), which is a free Windows-only program that renders fantastic results,
a base64 converter for your icon file. We're going pure CSS, so no external links either! I can recommend the online Image To Base64 Encoder, which is good, easy and free as well,
a text editor. Bear in mind that this should ideally be a text editor that doesn't use formatting codes. So what you really need is a source code editor. If you want to at least look like a programmer, then one of your obligatory tools is Notepad++. It has no Linux flavour, but Notepadqq does a fine job and does and looks pretty much the same. Both are free and open source,
instead of using a source code editor, you can also use the browser extension Stylus, which is available for Chrome, Firefox and Opera. If you work with CSS a lot, this is a must-have extension. It allows you to write and edit CSS and instantly see the result of your code on your webpage.
a basic knowledge of CSS and HTML. If you're not sure about this, don't worry. You can still use the code and play around with it. If you would like to work on your knowledge of CSS, you might want to have a look at the free course CSS Fundamentals at sololearn.com,
access to your website's stylesheet.

Let's do this!

Step 1 - find or create an icon

Find or create the icon you want to use. If you decide to download it from flaticon.com:

you can download any size, but keep in mind that you will have to scale it down to 16x16 pixels, so choose a simple icon that doesn't have a lot of detail,
don't forget to copy and paste the attribution code for the author in order to use the icon for free. Paste it into an empty document somewhere and add it to your site later on.

If you decide to create the icon yourself, then you're on your own; I'm not an expert in that field.

Step 2 - resize the icon if necessary

Scale the icon down to 16x16 pixels, if you haven't done so already and save it in .jpg or .png format.

Step 3 - convert the icon to base64 code

When you are satisfied with the result, head over to the online Image To Base64 Encoder, upload your icon file and copy and save the base64 code that was generated.

Step 4 - get the CSS code

Copy the following lines of code and paste them into your source code editor or into Stylus. Including the comment line is optional, but recommended:

/* insert any comment you wish */
 a:not([href*="YOUR_DOMAIN_NAME_HERE"]):not( [name*="a"] ):not( [name*="b"] ):not( [name*="c"] ):not( [name*="d"] ):not( [name*="e"] ):not( [name*="f"] ):not( [name*="g"] ):not( [name*="h"] ):not( [name*="i"] ):not( [name*="j"] ):not( [name*="k"] ):not( [name*="l"] ):not( [name*="m"] ):not( [name*="n"] ):not( [name*="o"] ):not( [name*="p"] ):not( [name*="q"] ):not( [name*="r"] ):not( [name*="s"] ):not( [name*="t"] ):not( [name*="u"] ):not( [name*="v"] ):not( [name*="w"] ):not( [name*="x"] ):not( [name*="y"] ):not( [name*="z"] ):not( [name*="1"] ):after {
   background-image: url("THE_BASE64_IMAGE_CODE_HERE");
   background-repeat: no-repeat;
   background-size: .7em;
   content: ' ';
   height: .7em;
   margin-right: -.1em;
   margin-left: .3em;
   padding-bottom: 2px;
   speak: none;
   width: .7em;
 }

explanation of the code in line 2:

What we tell the code to do here is to apply the properties and values we define to any a element, but NOT to a elements that are specified within brackets: :not( ). So in this case, the icon is NOT applied to an a element that contains your own domain or to anchor links.
You can expand or shorten the list to match your setup.

Usually, to add content to a website you would have to have access to the html code. You may have access to your own website, but in many other cases you don't. This is where so-called pseudo elements like :before or :after come in handy. Also, if you do have access to the html code, but don't want to mess it up, pseudo elements can be your friend in certain cases.

It is beyond the scope of this tutorial to explain the ins and outs of pseudo elements. You can view a good explanation on Youtube. At css-tricks.com you can find examples of what pseudo elements can be used for.

You may have to dabble with the values for the background-size, height, margin and padding properties to get things right for your setup.

Step 5 - personalize the CSS code

Add a comment in line 1 to remind yourself what this element does. It may be obvious to you now, but with hundreds of lines of code you will be thankful that you did so later.
In line 2 change YOUR_DOMAIN_NAME_HERE into your own domain, e.g. ocor61.blogspot.
You will notice that I don't use the full domain name ocor61.blogspot.com. The star in href*= means 'any url that contains the textstring ocor61.blogspot'.

In line 3 we will add the base64 code representing the icon image that you saved earlier. Paste the full code between the quotation marks, so it will look similar to this:

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4wUaDysretC4EwAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS42/U4J6AAAAJZJREFUOE9jIAW02egu/V8c/h8ZQ6WIB+v8rE+gGIDMwYdX+ljuzzVUVb6e6PkdWRxsANRwvCDHQEURphlEr/ezPkm0Ael6ygrImkGGgcRX+VgdIGhApr6yErpmsEYYwGcAumaQS0DiKHpwGYBLMwgQZcCpaNd32DSDAFEGlJqoe4EMQdcMAkQZgA+MGoDFAHIwRDcDAwCg4+WUvowwywAAAABJRU5ErkJggg==");

Step 6 - check, test, adapt, re-test

You may well find that your code is working well by now. Whether it is okay for you at this point or not depends largely on the size of the website's font and on the icon image, since we are adding the icon as a background image to the specified a element.

At this point it is advisable to use the browser extension Stylus, which allows you to play around with your code and see the changes in real-time.

Step 7 - backup and implement

I am a great believer in backups, so at this point I would advise you to take a backup of your entire stylesheet first. Just copy all of the code, paste it into a new tab in your source code editor and save it locally with a .css extension.
When you are satisfied, add the new code to your site's stylesheet and save the stylesheet.

Step 8 - test one more time

Again?
Just to be sure: disable the style in Stylus if that is what you used to adapt the code. Now open your browser in private (aka incognito) mode and load the site. Check everything. Probably it's still okay. If it isn't:

clear your browser's cache, close the browser, open it again in private mode and reload the site,
check every line of your new code. Mistakes are easily made; even forgetting a space, colon or semi-colon can mess up your code,
you can restore your stylesheet from the backup you created in the previous step.

If you really can't get it to work, leave a comment below and include your code and the url of your site. I'll see what I can do to help.

O'Cor

Search this blog