Having usually several external links in my posts, I wanted to follow the trend to mark them. To be more precisely, I wanted to mark all links that will open a new browser window or tab, regardless of whether the link refers to a different site or to another post. And, I did not wanted to change all posts.

I found the basics for my implementation at Stack Overflow.

Precondition

To ensure that a link will open a new browser window or tab, it requires the target="_blank" attribute. Fortunately, I set this attribute to all links from the first post on. So this precondition is fulfilled.

Define the Icon in SVG

The Stock Overflow discussion contains suggestions to add text, load an external graphic from an URL, or include the binary code of an image, which can’t be changed using a simple text editor.

As I wanted to be independent from any external resource, and also wanted to show some graphics instead of text, I took Henry’s Cat’s code as the base for my implementation. This is based on Scalable Vector Graphics.

As I struggled a little bit when trying to change the icon (SVG is not really my main domain), I changed the SVG shared at Stack Overflow to only draw lines instead of using masks. This code I added to my style.css.

:root {
	/*
	line left
	line right
	line bottom
	line top
	arrow left
	arrow right
	arrow diagonal
	*/
	--icon-external-link: url('data:image/svg+xml,\
	<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20"> \
		<g style="stroke:rgb(35,82,124);stroke-width:1"> \
			<line x1="5" y1="5" x2="5" y2="14" /> \
			<line x1="14" y1="9" x2="14" y2="14" /> \
			<line x1="5" y1="14" x2="14" y2="14" /> \
			<line x1="5" y1="5" x2="9" y2="5"  /> \
			<line x1="10" y1="2" x2="17" y2="2"  /> \
			<line x1="17" y1="2" x2="17" y2="9" /> \
			<line x1="10" y1="9" x2="17" y2="2" style="stroke-width:1.5" /> \
		</g> \
	</svg>');
}

In case you do not like the color of the icon, change stroke:rgb(35,82,124) to whatever you prefer.

Change Link Style in CSS

To add this icon to all links that match a specific criteria, it is also possible to use CSS. This is what I had to add to style.css:

a[target="_blank"]::after {
	content: '';
	background: no-repeat var(--icon-external-link);
	padding-right: 1em;
}

Links

CSS: Style external links at Stack Overflow
Scalable Vector Graphics