The external link displays an icon at the end of the text link. We can also easily do this in our WordPress website, in which we will not have any plugin installed. Indicating a link is going to open a new tab, or window is good practice. You can do this with an icon, text, and image.
Keeping that icon or image can be difficult, especially when making a new look.
There is a very easy solution with CSS.
Setup External Link Indicator with CSS And its Benefits
When an internal link is clicked, a separate tab will open, you will be able to reduce the bounce rate of the website. Normally we saw the external link in the Wikipedia article.
In this article contains example URLs or CSS to demonstrate the external link icons. Fortunately, we will be able to do this without the WordPress plugin.
Setup The Link
<a href="https://www.hardisha.com" target="_blank">Har Disha</a>
This is just a basic link with the target set to open in a new browser tab. No outgoing link icon and text indicator are present.
The CSS Selector
a[target="_blank"]:after {}
For the above code targets all links with the target aimed at opening a new tab or window.
Adding The Icon or Text
This CSS code will be adding a simple text indication.
a[target="_blank"]:after {
content: " (external)";
}
If you want an image to show after link then use the following, replace IMAGE-URL with your image URL.
a[target="_blank"]:after {
content: url(IMAGE-URL);
}
An Example of External link Icon CSS
You can copy paste this CSS into your WordPress Additional CSS section.
a[target="_blank"]:after {
content: url(https://www.hardisha.com/wp-content/uploads/2018/09/External-Link-Icon.png);
margin: 0 0 0 2px;
}
I hope this article helps you to understand external link uses. Please leave your valuable comment in the below comments box. 🙂