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

Use-Cases of this tutorial

  • Know how to set different colors for link text and the underline using CSS.
  • Know about the text-decoration-color CSS property.

By default, the color of the underline in a link is the same as its text color. However with the newly introduced text-decoration-color CSS property, the underline and the text can have different colors.

Showing an underline is one of the common styling techniques applied to links. 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;
}

Demo

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.

Loading Comments