Maison > interface Web > tutoriel CSS > le corps du texte

Comment créer un soulignement coloré pour du texte en HTML ?

Barbara Streisand
Libérer: 2024-11-14 09:54:01
original
667 Les gens l'ont consulté

How to Create a Colored Underline for Text in HTML?

Personnalisation de la couleur de soulignement

Dans le codage HTML, vous pouvez rencontrer une situation dans laquelle vous souhaitez souligner le texte dans une couleur spécifique, mais laissez le le texte lui-même est d'une couleur différente. Le problème survient lorsque vous utilisez un seul élément pour styliser à la fois le texte et le soulignement, conduisant à une coloration uniforme.

Pour résoudre ce problème, vous pouvez utiliser la dernière propriété CSS3 : text-decoration-color. Cette propriété vous permet de contrôler indépendamment la couleur du soulignement, vous permettant de créer du texte dans une couleur et un soulignement dans une couleur différente au sein du même élément.

Voici un exemple de code CSS :

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* for Safari browsers */
  text-decoration-color: red;
}
Copier après la connexion

Et un exemple HTML pour afficher le résultat :

<p>Black text with red underline in one element - no wrapper elements here!</p>
Copier après la connexion

En implémentant cette propriété CSS, vous pouvez diviser le style du texte et le souligner, obtenant ainsi la personnalisation des couleurs souhaitée sans avoir besoin d'un wrapper supplémentaire. éléments.

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