前回、「外部サイトへのリンクにアイコンを付ける方法」をご紹介しましたが、今回は「PDFファイル」のように、拡張子が違うファイル「.pdf」のような場合にアイコンを変えて表示したい際の方法になります。
こちらも、CSSの属性セレクタを利用しますが、ある特定の拡張子で終わる属性値に対してスタイルを指定する今回のような場合は「$」を用います。
それではサンプルを見ていきましょう。
HTMLを記述
1 2 3 4 5 6 |
<div id="linkbox"> <ul> <li><a href="#">普通のリンク</a></li> <li><a href="sample.pdf">サンプルPDFのリンク</a></li> </ul> </div> |
CSSを記述
1 2 3 4 5 |
a[href$=".pdf"]:after { content: url(../images/pdf-ic.png); /*任意のパスを指定*/ vertical-align: middle; margin: 0 5px; } |
このように、a[href$=”指定文字列”]:after {内容}という指定方法になりますので、この際、覚えてしまうのもいいかもしれません。
以上になります。