Comment créer un soulignement noir avec du texte rouge en utilisant CSS3 ?

Modifier la couleur de soulignement sans affecter la couleur du texte

Dans l'extrait de code fourni, vous avez créé un texte souligné à l'aide de balises HTML. Alors que le texte lui-même est rouge, vous cherchez à séparer la couleur de soulignement du noir. Explorons une solution CSS3 pour ce défi.

Présentation de text-decoration-color

CSS3 introduit désormais la propriété text-decoration-color, résolvant ainsi votre dilemme. Avec cette propriété, vous pouvez manipuler la couleur de la décoration du texte (comme les soulignements) sans affecter le texte lui-même.

Créer un soulignement noir avec du texte rouge

Pour y parvenir le résultat souhaité, implémentez la propriété CSS suivante :

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

Appliquez ce CSS à un élément HTML comme suit :

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

En conséquence, votre texte restera rouge, tandis que le soulignement sera coloré en noir, vous donnant l'effet souhaité sans recourir à des wrappers supplémentaires.

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!