【CSS】別タブ(target="_blank")で開くときのスタイルを指定してアイコンを付ける方法

みなさん、こんにちは。

WordPressで記事を書くときに外部リンクを貼り付けることがあるかと思います。
ユーザーに見た目で外部リンクか内部リンクかがわかるようにしておいた方が親切ですよね。

そんな時に便利なCSSの指定方法をご紹介します。

target="_blank"が指定されている時のみにスタイルを当てる

下記のようにaタグに「[target=”_blank”]」を付けることで「target=”_blank”」が指定されている「aタグ」にのみスタイルを当てることができます。

a[target="_blank"] {
	color: blue;
}

アイコンを設定する

下記が別タブで開く場合にのみアイコンを付けた例です。
アイコンは「Font Awesome(https://fontawesome.com/)」を使っています。

See the Pen target _blank by prawn-cocktail (@prawn-cocktail) on CodePen.

擬似要素の「::before」を使ってアイコンを表示させています。

まとめ

外部リンクの時にクラスを付けていた場合なんかはその必要がなくなるのでおすすめです。