如何将链接的下划线做成虚线？

浏览器的hover 实现的是实现效果，那么如何将链接的下划线做成虚线，或者在link与hover不同状态，下划线会从虚线到实线的变化呢？

设置text-decoration:none。也就是去除了链接的下划线。然后再给链接加下边框线，设置下边框线不同的宽度、线型、颜色，就可以实现“下划线”变成多样效果。可以参考关于border-style的属性。

参考样式：

<style type="text/css">
<!--
a.texta {
 text-decoration:none;
 border-bottom:1px dashed #ccc;
 color:#c00;
}
a.texta:hover {
 border-bottom:1px solid #c00;
 color:#666;
}
a.textb {
 text-decoration:none;
 border-bottom:1px dashed #ccc;
 color:#069;
}
a.textb:hover {
 border-bottom:1px dashed #c00;
 color:#000;
}
-->
</style>
<a href="/" class="texta">IT有道,IT之道，互帮互助</a><br /><br />
<a href="/" class="textb">IT有道,IT之道，互帮互助</a>

详细出处参考：http://www.ityoudao.com/Web/Wztx_626_231.html