Comment puis-je augmenter l'espace entre le texte souligné et le soulignement en CSS ?

Amélioration de l'écart de soulignement à l'aide de CSS

Créer une distinction visuelle entre le texte et son soulignement est essentiel pour la lisibilité. Bien que CSS propose la propriété text-decoration:underline pour ajouter un soulignement au texte, il ne fournit aucune méthode directe pour ajuster l'écart entre le texte et la ligne.

Solution alternative

Envisagez plutôt d'utiliser la propriété border-bottom avec le style solide et une largeur non nulle. Cela crée une bordure sous le texte, imitant efficacement un soulignement. De plus, l'application de padding-bottom augmente l'espace vertical entre le texte et la bordure, créant l'illusion d'un espace plus grand.

Par exemple, l'exemple de code suivant établit une bordure noire de 1 px sous le texte avec un remplissage de 3 px. en dessous :

border-bottom: 1px solid #000;
padding-bottom: 3px;

Personnalisation des couleurs

Si vous désirez que la couleur de la bordure corresponde à celle couleur du texte, omettez simplement la déclaration de couleur, ce qui donne border-bottom-width : 1px et border-bottom-style : solid.

Gestion du texte multiligne

Pour les multilignes texte, enveloppez-le dans un élément span imbriqué à l’intérieur de l’élément principal. Ensuite, appliquez les propriétés border-bottom et padding à l’élément span. Cette technique étend efficacement l'écart entre le texte et le soulignement pour les scénarios multilignes.

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!