Coloured Underline

How can I make a coloured underline when I hover over links?

I want to keep the text the same colour though.

 

I think that is incorrect, I mean you could do it, but I wasn't aware that you were supposed to use the border style on inline links

@gobbly
You can't technically have a different colored underline (AFAIK) than the text unless you use an image.
But to get an underline on hover do:

<a class="link" href="http://site.com">Site.com</a>

HTML:

Css:

a.link {
text-decoration: none;
}
a.link:hover {
text-decoration: underline;
}

Code (markup):

 

Yeah, you can do it. Put this in your CSS:

a, a:visited {
  text-decoration:none;
}
a:hover {
  text-decoration:none;
  border-bottom:1px solid #ff9900;
}

Code (markup):

Replace #ff9900 with your color.

 

You can also do it with an extra container using actual underline... though I suggest AGAINST this method since it is more HTML - there are situations where it's quite handy.

<style type="text/css">
a {
	text-decoration:underline;
	color:#F00;
}

a span {
	color:#000;
}
</style>

Code (markup):

with:

<a href="#"><span>Test</span></a>

Works just fine.