如何为 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.

以上是如何为 HTML 中的文本创建彩色下划线？的详细内容。更多信息请关注PHP中文网其他相关文章！