UX tip for external links

Clicking on a link going to an external site can be annoying if you aren’t prepared for that. To improve the user experience you should show some kind of indicator for external links.

On this website I have made such an indicator. The following link is an example: Example link.

If you are on desktop, when you hover the link it will show you an indicator. On mobile it should always show, although somewhat subtle to avoid beeing distracting.

The following code is how I implemented this indicator.

HTML:

1<a href="//example.com" target="_blank" rel="noopener">Example link</a>

CSS:

 1a[target='_blank'] {
 2  position: relative;
 3}
 4
 5a::after {
 6  content: '\\2197';
 7  position: absolute;
 8  top: -0.5em;
 9  right: -0.5em;
10  opacity: 0.5;
11}
12
13/* Desktop */
14@media (min-width: 60em) {
15  a::after {
16    opacity: 0;
17  }
18
19  a:focus::after,
20  a:hover::after {
21    opacity: 1;
22  }
23}

One drawback of my implementation is that it relies on target="_blank". Which you may not always want to add. So an alternative way to set this up would be to use some JavaScript that finds all external links and adds a CSS class to the elements.

If you are willing to put down the effort, an even better example can be seen on web.mit.edu/contact. If you hover over the “Alumni Association” link, it will show you the domain of the external site in a tooltip. Unfortunately they have no indicator for mobile users.

That’s it! Really short and sweet tip on how to improve the UX of your external links.