Categories: HTML&CSS

【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にアイコン画像のパスを指定し、widthheightでアイコン画像の大きさを指定します。

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;
}

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp