ファイルの拡張子に合わせてアイコンを表示する方法 - なんちゃってウェブ系エンジニアの備忘録

例えば、リンク先がPDF、Excel、Wordなどのファイルの場合、 そのアイコンを表示したいっていうケースがありますよね。 これをCSSのセレクタを使って、自動的にアイコンを表示できるようなので 実装方法をまとめておきます。 HTML <p><a href="test.pdf">PDFファイルです。</a></p> <p><a href="test.xls">Excelファイルです。</a></p> <p><a href="test.ppt">PPTファイルです。</a></p> CSS a[href$='.pdf'] { background:url("./pdf.png") no-repeat left; } a[href$='.xls'] { background:url("./excel.png") no-repeat left; } a[href$='.doc'] { back