How Can I Have a Red Underline on Black Text in HTML?

Colored Underlines in HTML

This code produces underlined text that is red in color:

echo "<u><font color='red'><br>$username</font></u>";

However, you wish to leave the text black but still have a red underline.

Solution: Text Decoration Color

CSS3 has introduced a new property called text-decoration-color. This property allows you to assign a separate color to the text decoration, in this case, the underline.

By using this property, you can achieve your desired effect:

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

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

This code produces black text with a red underline, without requiring additional wrapper elements.

The above is the detailed content of How Can I Have a Red Underline on Black Text in HTML?. For more information, please follow other related articles on the PHP Chinese website!