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

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

#link {
	text-docoration: none;
	color: blue;
}

/* show underline on hover */
#link:hover {
	text-decoration: underline;
	text-decoration-color: red;
	-webkit-text-decoration-color: red;
}

Example

Check out the underline color on hovering the below link :

Check out the home page

Browser Compatibility

All latest browsers support text-decoration-color. However in Safari it is currently prefixed as -webkit-text-decoration-color.

Underlines Can be Styled Further

Apart from changing the text underline color, several new CSS properties have been introduced for styling underlines.

• text-decoration-thickness can change the thickness of the underline.
• text-decoration-style can give a dashed, dotted, wavy, or a double underline.
• text-decoration-offset can set an offset position for the underline.
• text-decoration-skip-ink can even set the underline to pass through all characters (by default some long characters are skipped while underlining).

New CSS Properties for Styling Text Decorations & Underlines contains a short video on these newly introduced text decoration CSS.