Comment contrôler l'apparence des soulignements

Les soulignements peuvent être personnalisés pour améliorer l'attrait visuel et la lisibilité. Pour manipuler la longueur et la position d'un text-decoration:underline, il existe une technique simple mais efficace impliquant l'utilisation de dégradés :

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

Ajustement de la position :

• Pour déplacer la ligne, ajustez la propriété background-position.
• Par exemple, background-position : en bas à gauche ; aligne la ligne à gauche du texte.

Réglage de la longueur :

• Pour contrôler la longueur, ajustez la propriété background-size.
• Par exemple, background-size : 50 % 1px ; crée une ligne plus courte.

Personnalisation supplémentaire :

• Proche du texte : padding-bottom : 0 ; rapproche la ligne du texte.
• Loin du texte : padding-bottom: 10px; augmente la distance entre la ligne et le texte.
• Différentes couleurs : Personnalisez la couleur de la ligne en modifiant la propriété background-image, par exemple background-image : Linear-gradient(red 0 0 );.