View Full Version : How to do colored link underlines?

Grant Palin
12-17-2002, 07:33 AM
On the following page, I've seen links with underlines colored differently than the text for the link. How can you do that?


c q
12-17-2002, 08:02 AM
I stared really hard at them but I feel they are of the same color.

12-17-2002, 09:35 AM
they change to a very darker grey on mouseover.

Done using a style sheet.

12-17-2002, 09:38 AM
I concur; the underline is slightly heavier then the text and therefore seems lighter. Since the underline is an integral part of the font used i can't see a way to set its color differently, anyway.
Maybe toying with the border could do that.

12-17-2002, 09:46 AM
links before mouse over are #060c08 and on hover the color goes to #25462d with an underline :)

.menuNode a{
color: #060c08;
font-size: 12px;
line-height: 16px;
font-weight: 400;
padding: 0px 3px 1px 8px;
text-decoration: none;
white-space: nowrap;
.menuNode a:hover{
text-decoration: underline;
color: #25462d;


and the link is
<div class="menuNode"><a href="#"><p>Link name</a> </p></div>

12-17-2002, 12:10 PM
Not sure if the original question was how to do a simple css rollover or how to change te color of the underline... Anyway. here you have a green link with an orange underline (IE)

{color: #009900;}
text-decoration: underline;
color: #FFCC00;

and the link is
<a href="#" class="menuNode"><span class="green">Link name</span></a>

12-17-2002, 01:55 PM
the question was how to have the color of the underline be a different color than the rest of the text. what they did, was set the bottom border, like ronaldb66 suggested.

the style rules that apply are as follows:

.content a:link, .content a:visited {
color: #fdffff;
border-bottom: 1px solid #77e08f; }

font-family: Arial, "Trebuchet MS", Verdana, sans-serif;
font-size: 17px;
margin-bottom: 7px;
color: #c7fff0;}

12-18-2002, 04:02 PM
just a little warning, i have had border-bottom problems in Netscape, the border tends to make the link "bouncy" at times.
also does it in Opera

12-18-2002, 05:21 PM
that's because those browsers use the correct box model, i.e. the border adds to the overall dimensions.

Two ways round it:

1. Set the border to the same size all the time, but make sure it has a background color that will blend in with the background (not advisable for backgrounds that are not one plain colour)

2. Change the size on hover, i.e. if the link is 10px high and the border is 1px, that will make it 11px. So, make sure the size on hover is set to 9px... 9px + 1px = 10px and hence no wobble :)

There is a third method, you can change the box model used however I think method 2 will prove the best :D

::] krycek [::

12-18-2002, 08:31 PM
krycek :thumbsup:

12-18-2002, 08:39 PM
heheh thanks cg9com :D

I actually thought this through and realised that although using method 2 is better than method 1, you may want to alter the margins instead of the dimensions, that is, if you want the border to appear around the element as opposed to inside it.

i.e. in my previous example, keep the height as 10px but let's say the bottom margin is 2px; we would change the margin to 1px in the hover style, so that the background would always cover the same space and we still avoid the bouncing effect :)

That may well prove a better alternative to someone :)

::] krycek [::