How to Change Underline Color While Keeping Text Color the Same?

Changing Underline Color: Separating Text and Underline Hues

In order to maintain a red text color while changing the underline color to black, let's explore a solution leveraging a novel CSS3 property: text-decoration-color.

With this property, we can assign distinct colors to the text itself and the underline decoration, eliminating the need for additional wrapper elements. Here's an updated code snippet:

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* Safari still uses a vendor prefix */
  text-decoration-color: red;
}

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

By leveraging the text-decoration-color property, we can achieve the desired effect of having black underlined text without sacrificing the red text color.

The above is the detailed content of How to Change Underline Color While Keeping Text Color the Same?. For more information, please follow other related articles on the PHP Chinese website!