💡 Today I Learned

How to show a little arrow glyph after 'target="_blank"' anchors

What I wanted was a visual indication of which urls would open in a new window.

I found a pure css solution, that didn't require altering the html at all.

a[target="_blank"]::after {
	content: " \2197";
	font-size:0.7em;
	position: relative;
	vertical-align: baseline;
	top: -0.5em;
}

This means:

any `<a>` element with `target="_blank"`
 - should have a small "North East Arrow" after it.

Here's an example:

this link should have a north east arrow after it

Here's a different technique -- using a bit of svg.

a[target="_blank"]::after {
	content: "";
	width: 1em;
	height: 1em;
	margin: 0 0.05em 0 0.1em;
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat;
	background-size: contain;
	display: inline-block;
	vertical-align: text-bottom;
}

The problem here is that the color is set in the SVG. But we want to be able to set the color dynamically, using our dark/light theme. So I've altered it to use a different technique...

a[target="_blank"]::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	margin: 0 0.1em 0 0.1em;
	background-size: contain;
	display: inline-block;
	background-color:var(--link);
	--svg: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat;
	/* Chrome, still requires prefix in 2022 */
	-webkit-mask: var(--svg);
	/* Firefox and Safari */
	mask: var(--svg);
	vertical-align: text-top;
	top: -0.5em;
	opacity:0.5;
}

a[target="_blank"]:hover::after {
	opacity:1.0;
}

There's a lot going on there.

First: We use a variable to hold the --svg so that when we use it twice we don't have to write it out twice.

Next -- instead of setting the background, we set the "mask". This means our svg does not draw the glyph: it draws a glyph shaped hole. The hole is colored according to the background property.

Finally, I've lowered the opacity, and then on hover, bring it back to 100%;

Here's the svg, decoded:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M9 2L9 3 12.3 3 6 9.3 6.7 10 13 3.7 13 7 14 7 14 2ZM4 4C2.9 4 2 4.9 2 6L2 12C2 13.1 2.9 14 4 14L10 14C11.1 14 12 13.1 12 12L12 7 11 8 11 12C11 12.6 10.6 13 10 13L4 13C3.4 13 3 12.6 3 12L3 6C3 5.4 3.4 5 4 5L8 5 9 4Z"/></svg>

Sources

See also