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: #ffffdffffd;


        

Answer 1

Your code is likely to affect another class

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

<p>test</p>

Answer 2

Update: it works on Safari & Safari iOS with the -webkit- prefix!

p {
    text-decoration: underline;
    text-decoration-color: red;
    -webkit-text-decoration-color: red;
}

<p>test</p>

Answer 3

Following method to add under the line in your string.

1) You can use text-decoration to add underline in the bottom of the string like below.Please add your CSS try to this way.

Following demos are fine for working me.

<style type="text/css">
.underline 
{   
    text-decoration: underline;
    text-decoration-color: red;
    /*color: blue;
    border-bottom: 1px solid red;*/
}
</style>

<span class="underline">hello world</span>

2) If try to file in the first step so, you can try to second way to set the border in bottom of the string

<style type="text/css">
.underline 
{   
    /*text-decoration: underline;
    text-decoration-color: red;*/
    color: blue;
    border-bottom: 1px solid red;
}
</style>

<span class="underline">hello world</span>

Answer 4

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>