css external link icon

by Laurens Maneschijn

HTML

Open link in new window icon examples:<br>
<ul class="examples">
	<li><a target="_blank" href="#" class="icon_external_link_v1">link</a></li>
	<li><a target="_blank" href="#" class="icon_external_link_v2">link</a></li>
	<li><a target="_blank" href="#" class="icon_external_link_v3">link</a></li>
	<li><a target="_blank" href="#" class="icon_external_link_v4">link</a></li>
	<li><a target="_blank" href="#" class="icon_external_link_v5">link</a></li>
	<li><a target="_blank" href="#" class="icon_external_link_v6">link</a></li>
</ul>

<hr>

References:<br>
<ul class="references">
	<li><a target="_blank" href="https://stackoverflow.com/questions/1899772/most-robust-method-for-showing-icon-next-to-text">StackOverflow variations</a></li>
	<li><a target="_blank" href="https://www.base64encode.org/">BASE64 encode</a></li>
	<li><a target="_blank" href="https://yoksel.github.io/url-encoder/">SVG to css</a></li>
	<li><a target="_blank" href="http://www.amp-what.com/unicode/search/northeast">amp-what &UpperRightArrow;</a></li>
	<li><a target="_blank" href="https://www.amp-what.com/unicode/search/overlap">amp-what &#128471;</a></li>
	<li><a target="_blank" href="https://www.amp-what.com/unicode/search/arrow%20to%20corner">amp-what &#8689;</a></li>
</ul>

<hr>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==" />

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" id="svg_ext_link">
<style>.ic{fill:#000;}</style>
<path class="ic" d="M8 8H1v-7h2v-1H0v9h9v-3H8z"/>
<path class="ic" d="M7.7 0H5v1h2.3l-3.7 3.7.7.7 3.7-3.7v2.3h1v-4z"/>
</svg>

<hr>

CSS

/* general tips:
a[target="_blank"]::after { ... } to show for all external links.
a[target="_blank"]:hover::after { ... } to show for all external links, but only on hover.

a::after { display: inline-block;} helps with removing underline over the icon.
*/

/* Use data url image. Probably the easiest and safest option. */
ul.references li a[target="_blank"]:hover::after,
.icon_external_link_v1::after {
	content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
	margin: 0 1px 0 3px;
}


/* Use data url SVG

svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"
path d="M8 8H1v-7h2v-1H0v9h9v-3H8z"
path d="M7.7 0H5v1h2.3l-3.7 3.7.7.7 3.7-3.7v2.3h1v-4z"
/svg


- svg to css escaped:
  (e.g. using https://yoksel.github.io/url-encoder/ )
  pro: still readable and editable.

background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"%3E%3Cpath d="M8 8H1v-7h2v-1H0v9h9v-3H8z"/%3E%3Cpath d="M7.7 0H5v1h2.3l-3.7 3.7.7.7 3.7-3.7v2.3h1v-4z"/%3E%3C/svg%3E');


- svg to base64:
  ( e.g. using https://www.base64encode.org/ )
  pro: obfuscated.

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj48cGF0aCBkPSJNOCA4SDF2LTdoMnYtMUgwdjloOXYtM0g4eiIvPjxwYXRoIGQ9Ik03LjcgMEg1djFoMi4zbC0zLjcgMy43LjcuNyAzLjctMy43djIuM2gxdi00eiIvPjwvc3ZnPg==");

*/
.icon_external_link_v2::after {
	content: '';
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"%3E%3Cpath d="M8 8H1v-7h2v-1H0v9h9v-3H8z"/%3E%3Cpath d="M7.7 0H5v1h2.3l-3.7 3.7.7.7 3.7-3.7v2.3h1v-4z"/%3E%3C/svg%3E');
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 1px 0 3px;
}


/* 🗗...