Many of the webmasters and bloggers want to add a Wikipedia style external link icon to some of the external links. It is obvious matter that using a transparent image for this kind of external link icon increases one HTTP request. We have an old guide on how to use a transparent image to add an icon beside the external links for the effect. In short, the method for it was using a CSS like below :
1 2 3 4 5 6 7 8 9 10 | <style> a[target="_blank"]:after { content: url(you-image-link-here); margin: 0 3px 0 5px; display: inline-block; opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); } </style> |
Now, about the methods to get the equivalent effect with Base64 Data URI instead of URI of an image. If your website is example.com and you have a link on your text towards thecustomizewindows.com then the below CSS snippet will give you an icon beside your link towards thecustomizewindows.com :
1 2 3 4 5 | <style> a[href ^= "http://thecustomizewindows.com"]:after { content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=); } </style> |
If your website is example.com and you want an icon beside your all external links then the snippet will go like this :
---
1 2 3 4 5 | <style> a[href ^= "http"]:after { content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=); } </style> |
In both of the cases, links towards your own domain should be relative :
1 | <a href="/2020/04/" target="_blank" title="Create external links with an icon beside like Wikipedia">our archive of April 2020</a> |
Live version of the above HTML : our archive of April 2020.
Now, many of the webmasters and web designers want some hover effect with the above trick. We can invert on hover :
1 2 3 4 5 6 7 8 9 10 | <style> a[href ^= "http"]:after { content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=); } a:hover[href ^= "http"]:after{ -webkit-filter: invert(1); filter: invert(1); } </style> |
Here is the live example on JsFiddle. Click the “Result” tab and hover over the link on the line “Here is an absolute link” :
The above method is not visually the best but it is a demonstration of an easy trick avoiding to use a different base64 encoding for another image which is of a different colour. Data URIs does not work in IE 5-7 but are supported in IE 8. To solve this, you can use an IE-only stylesheet to put images.
This is the GitHub Gist of this trick.
