あらゆるブラウザに対応しているわけじゃないんで、すっごいネタなわけでもないんだけれど、こんなのもあるよっていう感じで。リンク先が外部の場合にのみ、リンクテキストの前に画像を入れるための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ではちゃんと反映されます。
FireFoxで見れば、Yahoo! Japanへのリンクにのみ矢印の画像が差し込まれています。ちょっと手を加えればメールリンクの場合はメール画像を差し込むとかもできます。ちょっとツウ好みな感じじゃないかと思うのですが、どうでしょうか。
Comments