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 texte-décoration:soulignement, 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;
}
Copier après la connexion
Ajustement de la position :
- Pour déplacer la ligne, ajustez la propriété background-position.
- Par exemple, background-position: bottom left; aligne la ligne à gauche du texte.
Ajustement 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 :
-
Fermer le 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 );.
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!