リンクのすぐそばにアイコンをつけるCSS

上記サイトに限らず「CSS リンクアイコン」あたりをキーワードにして検索すると、たとえばpdfリンクの後ろにアイコンを表示させたいとすると、判を押したように

a[href$=".pdf"] {
  background: url(image/pdf.gif) no-repeat 100% 50%; /* 背景を一度だけリンクの後ろ側に持ってくる */
  padding: 4px 20px 4px 0; /* 余白を上下と左に取る */
}

と記述するように解説されている。まあそれはそれでいいと思うんだけど、こう書いてもいいんじゃないか、むしろこの方が意味的にすっきりするんじゃないか、と。

/* 疑似要素で書いてみる */
a[href$=".pdf"]:after {
  content: url(image/pdf.gif); 
  padding: 4px 20px 4px 0;
}

IE6とIE7を切り捨てることになるけれども（もう面倒見なくていいでしょ）、そもそもセレクタレベル3のサポートがIE7以下は怪しいわけで、この方が見通しがよいかなと。

血統の森+はてな