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
Libérer: 2024-11-14 21:03:02
original
1001 Les gens l'ont consulté

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;
}
Copier après la connexion
<p>Black text with red underline in one element - no wrapper elements here!</p>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal