51 votes

Contrôler la position du soulignement sur la décoration de texte : soulignement

Existe-t-il un moyen de contrôler la position du soulignement dans la décoration de texte : soulignement ?

 <a href="#">Example link</a>

L'exemple ci-dessus a un soulignement par défaut... existe-t-il un moyen de déplacer ce soulignement de quelques pixels afin qu'il y ait plus d'espace entre le texte et le soulignement ?

67voto

minitech Points 87225

2020

Utilisez text-underline-offset !

2012

La seule façon de le faire est d'utiliser une bordure au lieu d'un soulignement. Les soulignements sont notoirement inflexibles.

 a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

Voici une démo. Si ce n'est pas assez d'espace, vous pouvez facilement en ajouter plus - si c'est trop, c'est un peu moins pratique.

3voto

Julien Points 2428

Utilisez une bordure en bas au lieu du soulignement

 a{    
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

Changer le rembourrage en bas pour ajuster l'espace

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X