How about using border-bottom
to underline the text?
a {
text-decoration:none;
border-bottom: 1px solid blue; /*Remove this if you want it only on hover*/
}
a:hover {
text-decoration:none;
border-bottom: 1px solid red;
color:red;
}