I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari.

CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与する方法が紹介されていました。
自動付与、というのは、例えば、<a href="***.pdf">pdfファイル</a> のようなリンクがあったとすると、pdfという最後の拡張子を元にPDFアイコンを表示できるCSSを適用するというもの。



方法は、次のようなリンクがあったとします。

<a href="files/holidays.pdf">View Holidays</a>

そして、次のようなCSSを定義します。

a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}

すると、次のように表示されます。

尚、残念ながら、このテクニックは属性セレクタをサポートするブラウザでしか使えないテクニックとなっています。
もし属性セレクタをサポートしないブラウザでも対応したい場合は、JavaScript が使えそうです。
document.getElementsByTagNameなどでエレメントリストを取得し、href属性をマッチングにかけてclassNameを自動付与していく方法でもほぼ同様のことが出来ますね。

関連エントリ

• CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例
• blockquoteでの引用を美しく表示するCSSサンプル
• CSSの小技集、20個
• CSSを書く際の5つのテクニック
• CSSだけでフレームを作るテクニック