View Full Version : Changing underline style of anchors


CPD
07-28-2005, 08:31 PM
Is there a way to change the properties of the just the "underline" style of a hyperlink?

I know you can toggle on and off the text-decoration style, and the underline assumes the font color style. I've never seen a style or property tho' that would allow me to change the pixel size or color of just the underline decoration, independent of the font.

I ask because I have a page that is packed with links (a full-year calendar of activities), but I want subtler styles for the underline so it doesn't clutter the page. Is this even doable? Any suggestion for a smarter alternative?

iTom
07-28-2005, 08:54 PM
Do you mean:

a {
color: #FF0000;
border-bottom: 1px dashed #0000CC;
text-decoration: none;
}


Hope this helps.

CPD
07-28-2005, 09:56 PM
Thanks, Thomas, I didn't even think the <a> tag supported border styles! I can do anything with the "underline" by following your suggestion. For example:

<a href="http://www.yahoo.com"
style="text-decoration: none; border-bottom: 2px solid #f00;">
Yahoo!
</a>

Now, taking this a step further, is there a way to reduce the space between the text and the bottom border? I tried using padding-bottom and line-height, but they did not help. Could it be that IE (or any browser for that matter) is reserving the space under the text for the text-decoration style.