Checkout my Getting Started with React video course on Skillshare. It is 100% free.

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

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
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.

Home Screencasts Best of Newsletter Search X