• Site top
• About
• Blog
• Diary
• Code
• Twitter
• Flickr Photo

あらゆるブラウザに対応しているわけじゃないんで、すっごいネタなわけでもないんだけれど、こんなのもあるよっていう感じで。リンク先が外部の場合にのみ、リンクテキストの前に画像を入れるためのCSSの書き方。

#Main #EntryBody a[href^="http:"] {
  text-decoration: none;
}

#Main #EntryBody a[href^="http:"]:hover {
  text-decoration: underline;
}

#Main #EntryBody a[href^="http:"]:before {
  content: url(images/icon_right_02.gif);
}

#Main #EntryBody a[href^="/"]:before,
#Main #EntryBody a[href^="http://localhost"]:before,
#Main #EntryBody a[href^="http://3xstars.org"]:before,
#Main #EntryBody .amazlet-box a[href^="http:"]:before {
  content: '';
}

※id名や画像のパスは自分の環境に合わせて書き直してください

要約すると（要約しか書かないけど）、アンカーのhref属性の値が「http:」で始まるものの前に画像を差し込むけれど、そのうち「/」「http://localhost」「http://3xstars.org」で始まる場合は差し込まない、という書き方です。残念ながら今も大きなシェアを占めるIE6には対応していませんが、FireFoxではちゃんと反映されます。

ちょっとテストしてみましょうか

Yahoo! Japan
3xstars

FireFoxで見れば、Yahoo! Japanへのリンクにのみ矢印の画像が差し込まれています。ちょっと手を加えればメールリンクの場合はメール画像を差し込むとかもできます。ちょっとツウ好みな感じじゃないかと思うのですが、どうでしょうか。