如何將鏈接的下劃線做成虛線？

<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="http://www.aa25.cn" class="texta">www.aa25.cn</a><br /><br />
<a href="http://www.aa25.cn/" class="textb">www.aa25.cn</a>

　　我們在浏覽網頁的時候，經常可以看到鏈接的下劃線是虛線，或者在link與hover不同狀態，下劃線會從虛線到實線的變化。這樣的效果是如何實現的呢?

　　其實這樣的效果，是設置text-decoration:none。也就是去除了鏈接的下劃線。然後再給鏈接加下邊框線，設置下邊框線不同的寬度、線型、顏色，就可以實現“下劃線”變成多樣效果