:after擬似要素と属性セレクタを使用する

CSSソース

/* PDFファイルへのリンクの場合 */
a[href$=".pdf"]:after {
     content: url(./pdf_icon.gif);
     vertical-align: middle;
     margin: 0 2px;
}
 
/* 圧縮ファイルへのリンクの場合 */
a[href$=".zip"]:after,
a[href$=".lzh"]:after {
     content: url(./zip_icon.gif);
     vertical-align: middle;
     margin: 0 2px;
}
 
/* CSSファイルへのリンクの場合 */
a[href$=".css"]:after {
     content: url(./zip_icon.gif);
     vertical-align: middle;
     margin: 0 2px;
}
 
/* 画像ファイルへのリンクの場合 */
a[href$=".jpg"]:after,
a[href$=".gif"]:after,
a[href$=".png"]:after,
a[href$=".bmp"]:after {
     content: url(./img_icon.gif);
     vertical-align: middle;
     margin: 0 2px;
}

属性セレクタとbackgroundプロパティを使用する

CSSソース

a[href$=".pdf"] {
     padding-right: 15px;
     background: url(./pdf_icon.gif)
     no-repeat center right;
}

classセレクタを使用する

XHTMLソース

<a href="sample.pdf" class="pdf">サンプルPDF</a>
<a href="sample.jpg" class="image">サンプル画像</a>

• 第4章 ユーザビリティを向上させるCSSデザインの法則