How to Create a Black Underline with Red Text Using CSS3?

Altering Underline Color Without Affecting Text Color

In the provided code snippet, you've created an underlined text using HTML tags. While the text itself is red, you seek to separate the underline color to black. Let's explore a CSS3 solution for this challenge.

Introducing text-decoration-color

CSS3 now introduces the text-decoration-color property, solving your dilemma. With this property, you can manipulate the color of the text decoration (such as underlines) without affecting the text itself.

Creating Black Underline with Red Text

To achieve your desired output, implement the following CSS property:

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

Apply this CSS to an HTML element as follows:

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

As a result, your text will remain red, while the underline will be colored black, giving you the desired effect without resorting to extra wrappers.

The above is the detailed content of How to Create a Black Underline with Red Text Using CSS3?. For more information, please follow other related articles on the PHP Chinese website!