CSS how to change the color of the line in underlined text

DanielMay 27, 2021

How to make a text underlined in CSS it's pretty clear. You just add text-decoration: underline; and that's pretty much it.

But there is more we can do with text-decoration.

In CSS we can use:

• text-decoration-color to set the decoration color
• text-decoration-style and text-decoration-line to change decoration style

Below there are a few examples of these properties in action:

See the Pen
text-decoration by JS Craft (@js-craft)
on CodePen.

There is also a text-decoration-thickness property but with a weak browser support.

Also if you want to see some more complicated text-decoration styles and animations you can take a look at this code pen.