How do I make a dashed line with the underline of a link?

<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>

When we are browsing the web, we can often see that the underline of the link is a dashed line, or that the underline will change from the dashed line to the solid one when link is in a different state from the hover. How has this effect been achieved?

In fact, this effect is to set the Text-decoration:none. Which is to go beyond the underline of the link. Then add a border line to the link, set the bottom border line different width, line style, color, you can achieve the "underline" into a variety of effects