別タブで開かれるリンクにCSSでアイコンをつける

Published: at 00:00

target属性に_blankが指定されているa要素は、クリックされると新規タブを開いてリンク先を表示する。

CSS側で属性セレクタを使うことで、新規タブで開かれるリンクを指定する。

    a[target="_blank"]

上記セレクタに対して擬似要素を設定し、リンクアイコンのSVGを入れる。

a[target="_blank"]::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2em' height='1.2em' viewBox='0 0 24 24'%3E%3Cpath fill='%2309f' d='M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h7v2H5v14h14v-7h2v7q0 .825-.587 1.413T19 21zm4.7-5.3l-1.4-1.4L17.6 5H14V3h7v7h-2V6.4z'/%3E%3C/svg%3E");
  line-height: 1;
  vertical-align: middle;
  margin-left: 0.1em;
}