Maison >interface Web >tutoriel CSS >Comment changer la couleur de soulignement tout en conservant la même couleur du texte ?

Comment changer la couleur de soulignement tout en conservant la même couleur du texte ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-14 21:03:02992parcourir

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

Changer la couleur de soulignement : séparer le texte et les teintes de soulignement

Afin de conserver une couleur de texte rouge tout en changeant la couleur de soulignement en noir, commençons par explorez une solution tirant parti d'une nouvelle propriété CSS3 : text-decoration-color.

Avec cette propriété, nous pouvons attribuer des couleurs distinctes au texte lui-même et à la décoration soulignée, éliminant ainsi le besoin d'éléments wrapper supplémentaires. Voici un extrait de code mis à jour :

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>

En tirant parti de la propriété text-decoration-color, nous pouvons obtenir l'effet souhaité consistant à avoir un texte souligné en noir sans sacrifier la couleur du texte rouge.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn