Comment ajuster la longueur et la position des soulignements en CSS ?

Ajuster la longueur et la position du soulignement en CSS

Souligner des éléments de texte peut être une tâche simple, mais personnaliser la longueur et la position du soulignement peut être un défi. Voici comment obtenir un contrôle précis sur le style du soulignement :

Contrôle de la longueur et de la hauteur :

Pour déterminer la longueur du soulignement, utilisez la propriété background-size. Spécifiez la largeur et la hauteur du soulignement, par exemple background-size: 80% 2px;. L'augmentation de la valeur en pourcentage allongera le soulignement, tandis que l'ajustement de la valeur de la hauteur contrôle l'épaisseur du trait.

Ajustement de la position :

La propriété background-position vous permet d'ajuster la position verticale du soulignement par rapport au texte. Pour rapprocher la ligne du texte, réduisez la valeur padding-bottom ; pour l'éloigner davantage, augmentez le remplissage.

Exemple de personnalisation :

Voici un exemple montrant comment modifier la longueur, la hauteur et la position du soulignement :

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-size: 80% 2px;  
  background-position: bottom center; 
  background-repeat: no-repeat;
  padding-bottom: 4px;
}
.custom-underline {
  background-size: 50% 1px;     
  background-position: bottom left; 
  padding-bottom: 10px;
}

En incorporant ces techniques, vous pouvez créer des soulignements personnalisés qui améliorent l'attrait visuel et la lisibilité de votre texte.

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!