Adding External Link Indicator with CSS
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
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.
content: " (external)";
If you want an image to show after then use the following, replace IMAGEURL with the actual image URL.
Using Font Awesome Icons
If you have Font Awesome installed you can use the following:
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.
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.
4 Replies to “Adding External Link Indicator with CSS”
Thanks for this post!
Nice CSS, ty.
Very Nice Information.
Modification I made that I wanted to share. It only exists within the body of an article (WordPress class used to restrict to blog). It has a special class exclusion for an area of text with outbound links that must not be modified, e.g. a disclaimer with restrictions on how it may be formatted. It ignores email links, phone links, and link anchors.