File under Maya gives advice she isn’t qualified to give.

External link icons are extremely visually noisy but admit of no confusion as to what people are clicking on. You can add them (to try out?) without any HTML changes whatsoever.

First you will need an icon. Here is Wikimedia’s one that is in the public domain.

You will notice that it is blue. You may not want yours to be blue. Open that bad boy up in a text editor, change the color however you want, and consider lowering the opacity. I wanted mine to be #c00, so:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="" width="100" height="100">
<path fill="#FFF" stroke="#c00" stroke-width="10" stroke-opacity="0.6" fill-opacity="0.4" 
d="m43,35H5v60h60V57M45,5v10l10,10-30,30 20,20 30-30 10,10h10V5z"/>

I hope this is more or less self-explanatory.

Make this available as a file somewhere.

Then go to your CSS and do something like this.

a[href^="//"]:not([href*=""]) {
    background: url(/assets/ext.svg) no-repeat;
    background-origin: padding-box;
    padding-right: 1.3em;
    background-size: 0.7em;
    background-position-y: center;
    background-position-x: calc(100% - 0.3em);

These selectors look for links that look like they might be external, exclude them if they are to (so obviously replace that). The url(...) bit also will need to be replaced. The padding-right, background-size, and background-position-x may need to be tweaked to look right to you, but these should do okay as starting values.

I had to add some nonsense about h1 because of a nested a and h1 on some of my posts to get this to apply in a way that made visual sense.

Selectors from this post, background-image approach from this one. Some people use pseudoelements for the link icon. I’m not sure if that’s supposed to be cleaner than a background image, but I don’t like having it clutter up the logical tree.