Different color for underline then font

Question

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?

Use a border? Use a pseudo element? Lots of ways. But you cant access the underline directly. — Turnip, Dec 01 '16 at 14:15

score 0 · Accepted Answer · answered Dec 01 '16 at 14:16

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!

1 Answers1