How to Create a Colored Underline for Text in HTML?

Customizing Underline Color

In HTML coding, you may encounter a situation where you want to underline text in a specific color, but leave the text itself a different color. The problem arises when you use a single element to style both the text and the underline, leading to uniform coloring.

To address this issue, you can utilize the latest CSS3 property: text-decoration-color. This property allows you to independently control the color of the underline, enabling you to create text in one color and an underline in a different color within the same element.

Here's a CSS code example:

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* for Safari browsers */
  text-decoration-color: red;
}

And an HTML example to display the result:

<p>Black text with red underline in one element - no wrapper elements here!</p>

By implementing this CSS property, you can split the styling of the text and underline, achieving your desired color customization without the need for additional wrapper elements.

The above is the detailed content of How to Create a Colored Underline for Text in HTML?. For more information, please follow other related articles on the PHP Chinese website!