CSS PDFなどのアイコンを自動で表示する裏技

pdfやdocなどの決まった拡張子にCSSを使って自動でアイコンを表示させる方法がphpspot開発日誌に紹介されていました。
とっても便利なのでゼヒ使ってみましょう。
※IE6では表示されないのでjavascriptと組み合わせる必要があります。

PDFファイルをダウンロード

HTML

<p><a href="aaa.pdf">PDFファイルをダウンロード</a></p>

スタイルシート

a[href $='.pdf'] {
padding: 4px 25px 4px 0;
background: transparent url(images/pdf/pdf.png) no-repeat center right;
}