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）

拡張子によって、表示するアイコンを変更することができるので便利です。
WordやExcelなど、いろんな拡張子ごとに設定すれば管理も楽になります。

参考

CSS3のセレクタ全42種 まとめておさらい使い方リファレンス