Comment puis-je personnaliser la longueur et la position du soulignement du texte avec des dégradés CSS ?

Personnalisation de la longueur et de la position du soulignement du texte

Pour obtenir des soulignements de texte personnalisables, les dégradés CSS offrent une solution polyvalente. En ajustant les paramètres tels que la taille de l'arrière-plan, la position de l'arrière-plan et le remplissage, vous pouvez ajuster sans effort la longueur et la position du soulignement.

Réglage de la longueur :

Contrôle la longueur du soulignement via la propriété background-size. Spécifiez un pourcentage ou une valeur de pixel fixe (par exemple, 80 % 2 px) pour mettre à l'échelle la longueur de la ligne.

Modification de la position :

Manipulez la position du soulignement à l'aide de l'arrière-plan -position. En modifiant les coordonnées horizontales et verticales, vous pouvez repositionner la ligne par rapport au texte (par exemple, en bas au centre pour un emplacement central).

Exemple :

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

Personnalisations supplémentaires :

En plus de la longueur et de la position, vous pouvez améliorer vos soulignements avec diverses autres propriétés :

• petit - Raccourcit considérablement la longueur
• left - Aligne la ligne sur le bord gauche
• center-close - Centre la ligne près du texte
• right - Aligne la ligne sur le bord droit
• close - Rapproche la ligne du texte
• grand - Augmente la longueur et l'épaisseur
• loin - Ajoute un espace entre la ligne et le 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!