PDFなど、CSSのみで拡張子によって自動でアイコンを表示するWordやExcelなどをサイトにアップして、アイコンをつけることは多いと思います。 <a href="word.pdf" class="iconWord">PDFファイル</a>など、いちいちクラスをつけるのは面倒です。 そんな時は、属性セレクタで指定して自動でアイコンを表示させると便利です。 拡張子によって、アイコンを変更したい場合 拡張子がPDFの場合です。 属性セレクタで、拡張子.pdfを指定します。 a[href$=".pdf"]::before { padding-right: 10px; display: inline-block; content: url("icon_pdf.png"); vertical-align: middle; } PDFファイル（PDF:20KB） 実行結果 下記のようにPDFアイコンがつきます。 PDFファイル（PDF:20KB） 拡張子によっ
smallpdf.com
