ArtSaltのサイドストーリー

SIONさんの「ふと今日は・・・・・・」に、特定のリンクのところにアイコンをくっつけて、そのリンクが何であるかすぐにわかる方法が書かれていた。
これはすばらしいと思った。

⇒ ふと今日は・・・・・・　 userContent.css で特定リンクの横にアイコンを表示させる

個人的な話ですが、私は現在Operaで使ってるユーザースタイルシートに、

a[target="_blank"]:after {
content:    "N";
color:      #fff !important;
background: #000 !important;
padding:    1px;
}

と書いていて、これはこれで便利だけど、美的センスがイマイチかな、といつも痛感していた（下記スクリーンショット）。

でもって、「ふと今日は・・・・・・　 userContent.css で特定リンクの横にアイコンを表示させる」で紹介されている、userContent.cssの書き方（Firefoxの場合）。
たとえば、a要素のtarget属性の値が _blank とか new になっているリンクにアイコンをつけるには、こういうふうに書く。

:-moz-any-link[target="_blank"]:before, :-moz-any-link[target="new"]:before {
padding-right: 4px;
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAVElEQVR4nGP0+f+WAR1sYRT6jyGIBpgIKaC6RhZcEv/xOJaRkRIbTRoxA2ILERrpHzgMDQ3/MQAkaPBjrKGKHKKNjQwMZ+rfMVLNqQOUchobSdcIACN5M7J0SyZ/AAAAAElFTkSuQmCC");
}

Operaのユーザースタイルシートだったら、こう書けばいい。

a[target="_blank"]:before, a[target="new"]:before {
padding-right: 4px;
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAVElEQVR4nGP0+f+WAR1sYRT6jyGIBpgIKaC6RhZcEv/xOJaRkRIbTRoxA2ILERrpHzgMDQ3/MQAkaPBjrKGKHKKNjQwMZ+rfMVLNqQOUchobSdcIACN5M7J0SyZ/AAAAAElFTkSuQmCC");
}

これ以外にも、

• FTPのリンク
• セキュア(HTTPS)なリンク
• PDF ファイルのリンク
• JavaScript のリンク
• mailto: リンク
• XPI ファイルのリンク
• .exe のリンク

などなど、多くの例があって、非常にうれしい。

SIONさん、ありがとうございます。