Multiple underline colors in one anchor

Question

I would like to, within one anchor </a>, have two different underline colors. Like so:

<a href="somehref">
    <span>This text should underline RED on `a` hover</span>
    <span>This text should underline GREY on `a` hover</span>
</a>

I can add text-decoration to each span on hover but this causes each line to hover individually. I want it so that when I hover over anywhere in the </a> both spans underline with their font color inherited.

Is this possible?

Note: I'm aware of text-decoration-color but due to limit support I cannot use it.

Answer 1

Some thing like this? You can use the anchor's :hover CSS pseudo class to style it's child and descendant.

Here is an reference to CSS child and descendant selectors.

a {
  color: black;
  text-decoration: none;
}
a span:first-child {
  color: red;
}
a span:last-child {
  color: grey;
}
a:hover span {
  text-decoration: underline;
}

<a href="somehref">
  <span>This text should underline RED on `a` hover</span>
  <span>This text should underline GREY on `a` hover</span>
</a>