Automatic marking of external links in online documentation

For users, it can be helpful to know up front whether a link from documentation leads to an external page. With the means of CSS, you can implement a solution that automatically adds a special symbol to all external links.

Example 1: All links to another domain get a symbol

In the following example, links receive a symbol when they point to a URL that is not on the indoition domain:

I am an internal link

I am an external link

Implementation for example 1

Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

Note that you need to adjust the path to the symbol as well as the domain name in the first line accordingly. It is enough to specify the domain name without the extension, such as mydomain instead of mydomain.com.


a[href*="//"]:not([href*="YOUR-DOMAIN-NAME"])::after {
  content: "";
  background: url("YOUR-PATH/external-link-symbol.svg") no-repeat;
  display: inline-block;
  vertical-align: middle;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.3em;
}

The symbols will then automatically appear on all affected links.

Example 2: All links that open a new window or tab get a symbol

The following example uses a slightly different logic than example 1 for deciding whether the symbol appears or not. Here, the symbol appears when the link opens a new window or tab (link target = _blank). This happens regardless of which server the target address is located on.

I am an internal link in the same window

I am an internal link in a new window

I am an external link in the same window

I am an external link in a new window

Implementation for example 2

Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

Note that you need to adjust the path to the symbol.


a[target="_blank"]::after {
  content: "";
  background: url("YOUR-PATH/external-link-symbol.svg") no-repeat;
  display: inline-block;
  vertical-align: middle;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.3em;
}

The symbols will then automatically appear on all affected links.

Example 3: Variant which uses a Font Awesome icon

The following example uses the same logic as example 2, so the symbol appears for all links that open in a new window, regardless of where the respective link target is located.

Unlike example 2, this example does not use an SVG image for the symbol, but a character from the Font Awesome library. This has the advantage that the symbol automatically adapts to the respective text color if links in your online documentation occur in different colors.

I am an external web link in a new window

Implementation for example 3

Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:


.a[target="_blank"]::after {
  content: "\f08e";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 0.75em;
  display: inline-block;
  text-decoration: none;
  padding-left: 0.3em;
}

Note that you also need to include Font Awesome into your online documentation if this library is not already integrated by your authoring tool.

Special case: externally linked images

The external link symbol also appears behind an image in case this image is linked to an external page. This is, of course, not what you want.

In case there are linked images in your online documentation, you have the following options to prevent the symbol from appearing:

▪Instead of linking the entire image, you can place an image map on the image and link within this image map. In this case, the symbol does not appear.

▪You can enclose the image in a DIV element for which the symbol has been disabled.

Example:

In your stylesheet, add the style nolinkicons to disable the symbol:


.nolinkicons a::after {
  content: '';
  display: none !important;
}

Enclose all images (or even texts) for which no symbol should appear in the following two HTML snippets:


<div class="nolinkicons">


</div>

Alternatively, you can also assign the nolinkicons class directly to the image if your authoring tool supports this. Or you can generally add the relevant CSS statements to all of your image classes.

___

Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!