Changing underline color with css not working in chrome?

Question

I am trying to change the color of the underline during a hover event using spans, and it works in IE9 and Firefox 13.01, but it does not work in Chrome (it should be underlined in gold).

#menu li:hover span.underline { text-decoration:underline; color: #FAA301; }

<ul id="menu"> <li style="z-index: 7;"><span class="underline"><a href="#">link1</a></span></li> </ul>

Here is js.fiddle: http://jsfiddle.net/wuUpL/7/ .

Initially, I got the idea from this post https://stackoverflow.com/a/166956/ but this also doesn't work in chrome.

Note. I don’t want to use borders to fix this, I already use borders as a border

Can someone help me here? Is there any chrome hack / exception that I could fix?

Answer 1

I know that you said you didn’t want to use borders here, but you found something that doesn’t work the same between both browsers.

You can make this work on Chrome by adding an inner spacing and using a frame on it.

http://jsfiddle.net/wuUpL/10/

Sorry if this is not what you had in mind, but Gecko and WebKit disagree on something here!

Answer 2

It may be worth noting that, as a rule, the color setting of the parent and child text for different colors is emphasized even in Chrome. But in Chrome there is some strange mistake in imposing link decorations:

 u { text-decoration: underline; color: red; } u:hover { text-decoration: overline; color: green; } u * { text-decoration: none; color: black; } u:hover * { text-decoration: none; color: gold; } 

 <p> <u> Parent with decoration. <span>Child (is a <code>span</code>). This works: <code>text-decoraion</code> has differrent (parents) colour, always.</span> </u> </p> <p> <p> <u> Parent with decoration. <a href="#">Child (is a <code>link</code>). This does not work <strong>in Chrome</strong>: <code>text-decoration</code> has always childs colour.</a> </u> </p> 

The strange thing is that both of the innermost elements have exactly the same calculated style in Chrome (according to Dev Tools), so it seems like there's nothing to be done now to fix this.

In the future, it will be possible to use one element and the text-decoration-color CSS property.