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.
About Abhishek Ghosh
Here’s what we’ve got for you which might like :
Additionally, performing a search on this website can help you. Also, we have YouTube Videos.
Take The Conversation Further ...
We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!
If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.
Contact Us