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

2020年8月22日2023年1月22日

この記事では、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;
}