Use of "text-decoration-color" is not working

Question

I want to color the text decoration. I got a tutorial from w3schools

And tried this

text-decoration: underline;
text-decoration-color: #dddddd;

But it is not working. Is this not valid? Is there any other way to color the underline?

Answer 1

text-decoration-color has minimal browser support

Instead, you can use something like a span to re-colour your text:

p {
  color: red;  /* colour of underline */
  text-decoration: underline;
}

span {
  color: black; /* original colour of p */
}

<p><span>underline is red, text is black</span></p>

Answer 2

Your code is likely to affect another class

p {
    text-decoration: underline;
    text-decoration-color: red!important;
}

<p>test</p>