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

Question

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?

Answer 1

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!

Answer 2

Maybe worth noting that generally setting different parent and child text colour to get differently coloured underline works even in Chrome. But there is some weird bug in link decoration inheritance in Chrome:

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>

What is strange is that both innermost elements have exactly same computed style in Chrome (according to the Dev Tools), so it seems there is nothing to do to fix that now.

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