【CSS3】別タブ（別ウィンドウ）で開くリンクの後ろに外部リンクアイコンを表示する方法

この記事では、CSSを使って別タブ（別ウィンドウ）で開くリンクの後ろに外部リンクアイコンを表示する方法をサンプルコードで説明します。

外部リンクを開くa要素はtarget="_blankを指定しているため、CSSではa[target="_blank"]::afterを使うことでリンクの後ろにアイコン画像を表示することができるようになります。

アイコンをそのまま表示する

アイコンをそのまま表示したい場合はcontent:urlにアイコン画像のパスを指定します。

See the Pen
new-window-icon-content by shiakisudev (@shiakisu)
on CodePen.

CSS

a[target="_blank"]::after{
  content:url(https://img.icons8.com/fluent/48/000000/external-link.png);
  display:inline-block;
  background-size: contain;
  vertical-align: middle;
}

背景画像としてアイコンを表示する

アイコン画像の大きさを変えたい場合は背景画像として表示する必要があるため、background-image:urlにアイコン画像のパスを指定し、widthとheightでアイコン画像の大きさを指定します。

See the Pen
new-window-icon-gazo by shiakisudev (@shiakisu)
on CodePen.

CSS

a[target="_blank"]::after{
  content:'';
  display:inline-block;
  background-image:url(https://image.flaticon.com/icons/svg/25/25284.svg);
  width:1em;
  height:1em;
  background-size: contain;
  vertical-align: middle;
}