【CSS】特定のファイルへのリンクだけにアイコンを指定しよう!

シュウ

今回は【CSS】特定のファイルへのリンクだけにアイコンを指定しよう!
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
属性セレクタについて学びたい方へ
今回は特定のファイル(PDF、ZIP、Excel)などにアイコンを指定について解説しております。

今回は、PDFファイルやZIPファイルなどといった特定のファイルのみにアイコンを指定
する解説になります。
イメージは下記のようになります。

属性セレクタ　 + ::afterを指定し、要素の「直後」にアイコン指定します。
補足:::beforeは、要素の「直前」になります。

属性セレクタについて

今回、指定する属性セレクタは、次のような記述方法になります。
[href$=".pdf"]このように、「属性$=”値”」の形になります。
上記の記述方法は、拡張子が「.pdf」のときだけにCSSが適用されるようになっています。

拡張子が「.zip」の場合は[href$=".zip"]と指定します。
書き方は以下のようになります。

属性セレクタについて

afterについて学ぼう資料のダウンロードはコチラ
beforeについて学ぼう資料のダウンロードはコチラ
borderについて学ぼう詳細はこコチラ

<ul>
	<li>after... <a href="sample.pdf">資料...</a></li>
	<li>before... <a href="sample.pdf">資料...</a></li>
	<li>border... <a href="cssboder/">詳細...</a></li>
</ul>

/*--一部省略しております--*/
a[href$=".pdf"] {
	color: #FD6158;
	text-decoration: none;
	background-color: #fff;
	padding: 1em 1.4em;
	border: solid 1px #FD6158;
	border-radius: 5px;
}

ul.file-list li a:hover[href$=".pdf"] {
	color: #fff;
	background: #E09694;
}

a[href$=".pdf"]::after {
	content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(pdf-icon.png);
    background-size: 20px 20px;
    margin-left: .5em;
}

a[href$=".pdf"]には、文字色、背景色、ボーターなど、リンクに対してCSSを記述しております。
a[href$=".pdf"]::afterとは、「資料のダウンロードはコチラ」の直後にアイコンを指定しております。

ポイント！
background: urlに画像を指定する際には、contentの中には何も記述しないようにしましょう。
content: '' ← この状態にしておきましょう。
また、サイズを変更する際には、display: inline-blockを指定してからサイズの指定をしましょう。

上記で解説したように、「.pdf」ファイルが指定されている場合はアイコンが表示され、
それ以外は、通常のリンクとして表示します。
毎回、HTMLに「pdf」のアイコンをimgタグで指定するよりかはCSSで指定した方が楽ですよね。

PDFのリンクの貼り方について