Geraint Geraint - 4 months ago 15
HTML Question

Multiple underline colors in one anchor

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

Some thing like this.

a {
  color: black;
  text-decoration: none;
}
a:hover span:first-child {
  border-bottom: 1px solid red;
}
a:hover span:last-child {
  border-bottom: 1px solid grey;
}
<a href="somehref">
  <span>This text should underline RED on `a` hover</span>
  <span>This text should underline GREY on `a` hover</span>
</a>