Nyasro

Change Color of Underline (text-decoration)

Published: August 28, 2014

Today you will know how to change color of underline in underlined text (text-decoration:underline) using CSS. There is no way to change underline color using css property unless it is CSS3 but using this small trick can help you to have desired color of underline for underlined text.

You already know that the color of underline is same as color of underlined text.

Here is an example

HTML:

<span class="underline-color">
  Once Code, Never Code.
</span>

CSS:

.underline-color{
  color: #0088CC;
  text-decoration: underline;
}

RESULT:

See the Pen CopBw by Nya Sro (@nyasro) on CodePen.

Here is an example to change color of underline using CSS3

HTML:

<span class="underline-color">
  Once Code, Never Code.
</span>

CSS:

.underline-color{
  color: #0088CC;
  text-decoration: underline;
  -moz-text-decoration-color: red; /* Code for Firefox */
  text-decoration-color: red;
  }

RESULT:

See the Pen upIdo by Nya Sro (@nyasro) on CodePen.

Trick for Cross-Browser Underline Color

The trick for cross-browser underline color is to add new child inline element and changing of its parent element to change color of underline.

Here is an example

HTML:

<span class="underline-color">
  <span class="underline-text" >Once Code, Never Code.</span>
</span>

CSS:

.underline-color{
  color: red;
  text-decoration: underline;
}
.underline-text{
  color: #0088CC;
}

RESULT:

See the Pen luoHr by Nya Sro (@nyasro) on CodePen.

Conclusion

There is css property to change the underline color in CSS3 but not below this version of CSS. So, this trick can simpley help you to change color of underline for underlined text.

Let me know if you have anything. Please write the comment below.