アイコン

別のウィンドウで開く場合にアイコンを表示したかったので、考えてみた。
ついでにメールの場合も。
今度は:hoverなんて使ってみたかった。でも微妙にうまくいかない。
レイアウトが崩れたりするし。
z-indexとopacityがよくわからないし。
でもいいんだ。
Mozilla Firefox 1.5はマウスカーソルを変えられる、はずだから。

長いので「続きを読む記法」なんて使ってみてます。

a[href^='mailto:']:hover::after,
a[target]:hover::after {
  margin-right: -16px;
  padding-right: 16px;
  z-index: 99;
  content: '';
  opacity: 0.9;
  background-repeat: no-repeat;
  font: 16px/16px monospace;
}

a[target='_self']:hover::after,
a[target='_parent']:hover::after,
a[target='_top']:hover::after {
  display: none;
}

a[href^='mailto:']:hover::after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAJxAIA3kywAAACBjSFJNAABulQAAdA4AAPGBAACFRgAAZO8AAPeGAABJ5AAAHlgqzUyEAAADB0lEQVR4nGL8//8/AzZwYt9ckRdvhM/+//uXUYTrjomtf/krbOoAAogJm+DRA6u87z1TfsrO+lOOlfm77IO3Rk/2r+0LwaYWIIAY0V2wf9+2uQ8fCSQaaV9nlOK/wfDz40eG+49lGG6+sfsvyXVlvVdMTjCyeoAAghtw4tAS4c8vON5g9Q8aYPl1XsIxpvUliA0QQGADDm6f5/fopfxqaZ43bE4h4Vi0/ALij0D8iWHfmjMMD15x/ZHjPh/tEl+3CiCAmPZuXTvn1iP5DXrKl9lYGP9g0fwDrpmB4SsDSI3Mvy0sdz+Zrdi7atEcgABiuXJHPNlDdxWDAPcfhq/Mglhs/gzXDDaA+Q+DMMMFBu7/DxnPPK9JBgggln///jHImCgwsDAxMjA9+Mrw7+8fBkYmJqjNMM3fgPgLw/9/XxmYgFjHSJvhz5+/DKfO/mMACCCwAbv2OjBoqe5k+PPzO8P3rx8ZWFj/AQ35zsDwH2oz4zeg5i8Mf35/Bar5wPDgDTPD4Vd5DP/+fWAACCAWoCoGNzcdhi1HmBk+fTzCIPX0FgM3zz8GJuYfDP//fwcbwMj4C+iybwxfv3xiuP6Rn+GlSB5DbKw2w9y5xxgAAojl9+8/DGxsbAwh7vrA0FVi2LrjFIM87z0GIWEWhvOPVYAG8DMYyp5lePf2C8O9jwYMHv62DGqSQEOeAz336TsDQACBvfDzJwPDO1YGBkkxXob4KAeGBWsEGC5d+8Hg6KQOTVxMDHwCHAwJ0QYMXKzMDE+BYj+BPgPpBQggsAF/gLH37fd/hs2nHzPcOP+YQUVLmsHLV57h+z9GsAGRscIMJ049ZFi25hKDmKIIg46xDAMLAyPYAIAAAhtw585rhuX7bzCISgsyuAWYMXBwsjI8BkbAP2gqZ2JkZNDSV2D4qSbNcODgTYbjhx8weBtrgA0ACCAWUEo8efIeQ5qfAYMY0Asg1/wGxqDYf5ATkTDQySwsrAzxjjoMz59/Zti//xoDSC9AAIFd8OrVS4Zly14Skw0wAECAAQD6S0ejj+JIzgAAAABJRU5ErkJggg==');
}

a[target]:hover::after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAJxAIA3kywAAACBjSFJNAABulQAAdA4AAPGBAACFRgAAZO8AAPeGAABJ5AAAHlgqzUyEAAABs0lEQVR4nGL8//8/AyUAIIAYGZQzNzBwSmoxsIurEq3r58vbDN+f32C4Oz0IIIBYgJo1GaKyVBnY2FDU5GlxMWxY+4LhkSYfNrbqo5PzWIDKRAECiJHBeOZ/Bk1N0t1+/ToDw9l0RYAAApnCcKpUjoGf4ydYHFuYwMRg9JffXAxmSdfBQQAQQGADTPXkibK0YHsBw4WXFxgMxA2APC2wGEAAMRHr4r9//zKceXqGoSOuDEwz/P8HFgcIIBZibT7/4jzYC9u/bId4xaqPgUGMoQ4ggAi6AGZzamQog4G3CsPjH88Z9INlGY5PnMDAIM6gAxBABF0Ask1LSIthyoIlYL6YFRfDq2PfGKZfyWFgeMFwByCACLqAkZGRocOhg2G9/3ow+6vILzDNcDiTgWEnQxdAABE0gJmZmYGfn59BSEiIQVdUl+Hrpj9gmoGFGyT9GSCAWIDJ8tbpSw/V+Nh/EAyLFJkUht/ivxl+/ONhmP1zwwOQMEAAsQDT9HWz6EVswLygQMg1sKgDWvqA4cfLuyARgABiBAUS0E+yINeCvEzQECTjQEYBBBDMABYSNcMNAQgwAOHFmlT7AGr8AAAAAElFTkSuQmCC');
}