用CSS正确标识外部链接

这是我一直在使用的样式表内容

代码:

a.ubblink[href*="http://"] {background-image:url(images/blank.gif);background-position:center right;padding-right:13px;background-repeat:no-repeat;}
a.ubblink[href*="http://"]:hover {background-image:url(images/blank-hover.gif);}

但opera,ie 目前都不支持 属性选择器 的写法，所以只有firefox才能看到效果。今天看到这个 Simple, accessible external links，有点意思。

他是这样做的

代码:

<a class="external" href="#">sed diam nonummy<span>外部链接说明</span></a>

样式表是

代码:

a.external span
{
position: absolute;
left: -5000px;
width: 4000px;
}
a.external:link
{
background: url(icon.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}
a.external:hover
{
color: red;
background: url(icon.gif) no-repeat 100% -200px;
padding: 0 20px 0 0;
}

把 a span 中的说明文字丢到浏览器显示区域之外（这个span据说是为了某些不提示title的设备而准备的）。
然后在后面加上图片表示这是一个外部链接。

其实，我觉得的倒是可以参考这种精神，用js解决。