PDFファイルリンクにのみPDFアイコンを表示させる

PDFファイルリンクにのみPDFアイコンを表示させる

前回、「外部サイトへのリンクにアイコンを付ける方法」をご紹介しましたが、今回は「PDFファイル」のように、拡張子が違うファイル「.pdf」のような場合にアイコンを変えて表示したい際の方法になります。

こちらも、CSSの属性セレクタを利用しますが、ある特定の拡張子で終わる属性値に対してスタイルを指定する今回のような場合は「$」を用います。

 

それではサンプルを見ていきましょう。

 

DEMO

HTMLを記述

 

CSSを記述

 

このように、a[href$=”指定文字列”]:after {内容}という指定方法になりますので、この際、覚えてしまうのもいいかもしれません。

以上になります。


 

タイトルとURLをコピーしました