新しいウィンドウを開くaタグtarget=”_blank”に対するCSS指定


スタイルシートの指定では、様々な要素に対してスタイルを指定できますが、
今回はtarget=”_blank”が設定された新しいウインドウが開くアンカーリンクに対してのみスタイルを指定する方法を紹介します。

よく使われるのはリンクの後ろにアイコンを表示するような表現ですね。

download

その都度いちいちアイコンを配置しなくても、スタイルシートで1カ所の指定で対応できます。
target=”_blank”の設定された要素に対してスタイルをしているする場合、
以下の指定方法を覚えるだけです。

a[target="_blank"]{
/* ここにスタイルを書く */
}

新しいウィンドウを開くリンクを赤文字にしたい場合は、
上記の場所に

color=”#ff0000″

などを入れるといいです。

今回は、よく使われるテキストの後ろにアイコンが表示されるパターンを作ってみます。
擬似要素の::afterに対してアイコンを設定しましょう。

a[target="_blank"]::after{
/* ここにスタイルを書く */
}

実際にはこんな感じ。

See the Pen
target="_blank"へのCSS
by Yoshimune (@hachidaime)
on CodePen.

FontAwesomeってなんじゃ?という人もいるかもしれません。
ちょっと古い記事ですが・・・

コピペだけでかわいいアイコンが簡単に使える、アイコンフォントを使ってみよう。 

今回例として出しただけなので、ここのスタイルの指定は何でも構わないので、
画像を表示させたり、好きなように指定してみて下さい。