0

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

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

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

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

 

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

 

DEMO

HTMLを記述

 

CSSを記述

 

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

以上になります。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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