How to Change Link Underline Color using text-decoration-color CSS

Updated on January 6, 2020Published on January 6, 2020

The underline color of a link can be set through the newly introduced text-decoration-color CSS property. This makes it possible to change the underline color which can be different from the text color.

By default, the color of the underline is set the same as the text color of the link. But sometimes we would like to give some other color to the underline, different from the text color of the link. To do so, we have mostly used the border-bottom CSS property to make it look like an underline.

However there is a new and direct way to do this without using the border hack. The text-decoration-color CSS property can change color of the text decoration (underline in this case).