Comment puis-je personnaliser la longueur et la position du soulignement à l'aide de dégradés CSS ?

Soulignage de style : contrôle de la longueur et de la position

Les soulignements sont couramment utilisés pour souligner le texte. Cependant, ils sont limités à une longueur et une position fixes, ce qui laisse des limites à la personnalisation. Ce guide explique comment modifier la longueur et la position des soulignements à l'aide des dégradés CSS.

Utilisation des dégradés

Les dégradés offrent un moyen flexible de manipuler les soulignements. En utilisant un dégradé d'arrière-plan, vous pouvez ajuster à la fois la taille et la position de la partie soulignée.

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center; /* Adjust position */
  background-size: 80% 2px; /* Control length and height */
  background-repeat: no-repeat;
  padding-bottom: 4px; /* Can also affect position */
}

Ajuster la longueur et la position

En modifiant la taille de l'arrière-plan propriété, vous pouvez contrôler la longueur et la hauteur du soulignement. Par exemple :

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

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

Pour repositionner le soulignement, ajustez la propriété background-position. Par exemple :

.left {
  background-position: bottom left;
}

.center-close {
  background-position: bottom 5px center;
}

.right {
  background-position: bottom right;
}

Contrôles supplémentaires

La propriété padding-bottom peut également être utilisée pour affiner la position du soulignement, en particulier lorsqu'elle est utilisée conjointement avec la propriété background-position.

.close {
  padding-bottom: 0;
  background-position: bottom 5px center;
}

.far {
  padding-bottom: 10px;
}

Exemple

<span class="underline">This is a sentence</span>. I would like <span class="underline close">some words to have</span> longer <span class="underline left">underlines</span> than others. I would <span class="underline big center-close">also like</span> to be able to change the <span class="underline small right">position</span> of the <span class="underline big">underline</span>(to
<span class="underline far">be centered under the word, for example</span>).

Cet exemple montre les différents ajustements de longueur et de position rendus possibles par les dégradés CSS.

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!