Indicating a link is going to open a new tab, or window, and direct users away from your site is good practice. Yon can do this with an icon, text, or image.
Maintaining that icon or image could be tough, especially when doing a redesign.
There is a very easy solution with CSS.
Setup the Link
<a href="http://google.com" target="_blank">Google</a>
This is just a basic link with the target set to open in a new tab. No outgoing link icon or text indicator is present.
The CSS Selector
a[target="_blank"]:after {}
The above code targets all links with the target aimed at opening a new tab or window.
Adding the Icon or Text
The following CSS code will add simple text indication.
a[target="_blank"]:after {
content: " (external)";
}If you want an image to show after then use the following, replace IMAGEURL with the actual image URL.
a[target="_blank"]:after {
content: url(IMAGEURL);
}Using Font Awesome Icons
If you have Font Awesome installed you can use the following:
a[target="_blank"]:after {
font-family: 'FontAwesome';
content: " \f08e";
}A Fool-Proof Selector
The previous selector relies on the target tag. This selector will find all links to domains other than your own. I will use yourdomain.com to demonstrate.
a:not([href*='yourdomain.com']):not([href^='#']):not([href^='/']):after {}Logic breakdown: If a link does not contain yourdomain.com then display content after link. Or, if a link does not contain a same-page anchor link then display content after, example: #top) Or, if a link does not contain an internal website like, example: /blog.