Home >Web Front-end >CSS Tutorial >How to Change Underline Color While Keeping Text Color the Same?

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

Susan Sarandon
Susan SarandonOriginal
2024-11-14 21:03:02987browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn