Mike Mike - 7 days ago 8
CSS Question

Different color for underline then font

Is there a way to make different color for underline of text then text itself?

It seems that

text-decoration-color
is not available on most browsers. So is there other way?

Answer

Use border-bottom, and text-decoration: none. It seems same as underlined link.

Have a look at the snippet below:

a {
  text-decoration: none;
  color: red;
  border-bottom: 1px solid blue;
}

a:hover {
  color: blue;
  border-color: red;
}
<a href="#">This is a underlined link</a>

Hope this helps!