Comment personnaliser la longueur et la position de la décoration du texte à l'aide de CSS ?

Personnaliser la longueur et la position de la décoration du texte

Dans votre quête de décorations de texte élégantes, vous souhaitez rendre le soulignement plus intéressant visuellement en variant sa longueur et sa position. Bien que cela puisse paraître simple, CSS pose quelques défis.

Ajustement de la longueur

Pour modifier la longueur du soulignement, utilisez la propriété background-size. Il accepte deux valeurs : la largeur et la hauteur du soulignement. En ajustant ces valeurs, vous pouvez contrôler la longueur de la ligne.

Modification de la position

Pour changer la position du soulignement, modifiez la propriété background-position. Cette propriété spécifie le point de départ du soulignement le long de l'axe des x (gauche-droite) et de l'axe des y (haut-bas). En modifiant ces valeurs, vous pouvez déplacer le soulignement vers le haut, le bas ou sur les côtés.

Dégradé pour la flexibilité

L'utilisation d'un dégradé pour la décoration du soulignement offre une plus grande flexibilité et le contrôle. Contrairement à une ligne continue, un dégradé vous permet de personnaliser facilement la taille et la position.

Exemple de code

Voici un exemple illustrant les options de personnalisation :

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

Classes supplémentaires avec variations :

.small {
  background-size: 50% 1px;
}

.left {
  background-position: bottom left;
}

.center-close {
  background-position: bottom 5px center;
  background-image: linear-gradient(red 0 0);
}

.right {
  background-position: bottom right;
}

.close {
  padding-bottom: 0;
  background-position: bottom 5px center;
  background-image: linear-gradient(blue 0 0);
}

.big {
  background-size: 100% 3px;
}

.far {
  padding-bottom: 10px;
  background-image: linear-gradient(purple 0 0);
}

Avec ces classes, vous pouvez facilement mettre en œuvre diverses combinaisons de longueur et de position, créant des effets de texte uniques et accrocheurs.

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!