Changing underline color with css doesn't work in chrome?

css, html, underline

Solution

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

You can get this to work on Chrome by adding an inner span and using a border on it.

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

Sorry if it is not what you had in mind, but Gecko and WebKit are not agreeing on something here!

Problem

I am trying to change the underline color during a hover event using spans and it works in IE9 and Firefox 13.01 but it doesn't work in Chrome (it should underline 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/ . I originally got the idea from this post https://stackoverflow.com/a/1175402/1490248 but that one doesn't work in chrome either. Note: I don't want to use borders to fix this, I am already using borders as a border Can anyone help me out here? Is there some sort of chrome hack/exception I could use to fix this?

Original source

Related problems