How Can I Change the Color of an Underline in CSS?

CSS text-decoration underline color

In web development, there are scenarios where you may desire to stylize the underline of text. This article addresses the challenge of changing the color of the underline below a line of text, creating a distinct visual effect.

Solution 1: text-decoration-color (Modern Browsers)

For modern browsers that support the text-decoration-color property, simply apply the following CSS rule:

text-decoration-color: green;

This method allows for direct specification of the underline color.

Solution 2: border-bottom (Older Browsers)

If the text-decoration-color property is not supported by an older browser, an alternative approach is to utilize the border-bottom property:

a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:hover {
 border-bottom-color: green;
}

This approach adds a colored border to the bottom of the text, effectively mimicking the appearance of an underline.

The above is the detailed content of How Can I Change the Color of an Underline in CSS?. For more information, please follow other related articles on the PHP Chinese website!