External Link

Valveの新サイトを見て外部リンクマークがあると分かりやすいかと思ったので、自分のサイトでもCSSでやってみた。やり方はかなり簡単。

a[href^="http"]:after {
content: url("画像URL");
}
a[href^="除外したいURL1"]:after,
a[href^="除外したいURL2"]:after {
content: '';
}

基本的にhttpから始まる絶対アドレス指定のリンクの尻に画像が表示されるようになるので、除外したいURLに自分のサイトのURLを最低1つは入れる。これはいくらでも増やすことができるし、div#test a[href^=みたいに指定することも可能。ただし古いブラウザだと正常に表示されない。あと最新版のIEでも一部上手くいかない。

Wikipediaの外部リンク画像はパブリックドメインなので問題なく使え、これが一番使われている画像なので下手にオリジナルを使うより分かりやすい。