Comment augmenter l'écart entre le texte et le soulignement en CSS ?

Question

En utilisant le CSS, lorsque le texte a text-decoration:underline appliqué, est-il possible d'augmenter la distance entre le texte et le soulignement ?

Answer 1

Entrer dans les détails du style visuel de text-decoration:underline est plutôt futile, donc vous allez devoir utiliser une sorte de piratage qui supprime text-decoration:underline et le remplace par autre chose jusqu'à ce qu'une version magique et lointaine de CSS nous donne plus de contrôle.

Cela a marché pour moi :

   a {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) 81%, 
        #222222 81.1%,
        #222222 85%,
        rgba(0,0,0,0) 85.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>

• Ajustez les valeurs en % (81% et 85%) pour modifier la distance entre la ligne et le texte.
• Ajustez la différence entre les deux valeurs en % pour modifier l'épaisseur du trait.
• ajuster les valeurs de couleur (#222222) pour changer la couleur du soulignement
• fonctionne avec des éléments en ligne multiples
• fonctionne avec n'importe quel fond

Voici une version avec toutes les propriétés propriétaires pour une certaine rétrocompatibilité :

a {     
    /* This code generated from: http://colorzilla.com/gradient-editor/ */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */

    text-decoration: none;
}

Mise à jour : version SASSY

J'ai créé un mixin scss pour cela. Si vous n'utilisez pas SASS, la version normale ci-dessus fonctionne toujours très bien...

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) $top,
        $color $top + 0.1%,
        $color $bottom,
        rgba(0,0,0,0) $bottom + 0.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

puis utilisez-le comme suit :

$blue = #0054a6;
a {
    color: $blue;
    @include fake-underline(lighten($blue,20%));
}
a.thick {
    color: $blue;
    @include fake-underline(lighten($blue,40%), 86%, 99%);
}

Mise à jour 2 : Conseil sur les descendeurs

Si vous avez une couleur d'arrière-plan unie, essayez d'ajouter un mince text-stroke o text-shadow de la même couleur que votre arrière-plan pour que les descendantes aient un bel aspect.

Crédit

Il s'agit d'une version simplifiée de la technique que j'ai trouvée à l'origine chez https://eager.io/app/smartunderline mais l'article a depuis été retiré.

Answer 2

Je sais que c'est une vieille question, mais pour le réglage d'une ligne de texte unique display: inline-block puis de régler le height a bien fonctionné pour moi pour contrôler la distance entre une bordure et le texte.

Answer 3

La réponse de @last-child est une excellente réponse !

Cependant, l'ajout d'une bordure à mon H2 a produit un soulignement plus long que le texte.

Si vous écrivez votre CSS de manière dynamique, ou si, comme moi, vous avez de la chance et savez ce que sera le texte, vous pouvez faire ce qui suit :

1. changer le content à quelque chose de la bonne longueur (c'est-à-dire la même

2. texte) définir la couleur de la police à transparent (ou rgba(0,0,0,0) )

pour souligner <h2>Processing</h2> (par exemple), changez le code de last-child pour être :

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

Answer 4

Voir mon violon .

Vous devez utiliser la propriété border width et la propriété padding. J'ai ajouté un peu d'animation pour que ça ait l'air plus cool :

body{
  background-color:lightgreen;
}
a{
  text-decoration:none;
  color:green;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}

<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>

Answer 5

Si tu veux :

• multiligne
• pointillé
• avec rembourrage inférieur personnalisé
• sans emballage

souligner, vous pouvez utiliser 1 pixel de hauteur image de fond avec repeat-x y 100% 100% position :

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

Vous pouvez remplacer le deuxième 100% par quelque chose d'autre comme px o em pour ajuster la position verticale du soulignement. Vous pouvez également utiliser calc si vous voulez ajouter un rembourrage vertical, par exemple :

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

Bien sûr, vous pouvez également créer votre propre motif en png base64 avec une autre couleur, une autre hauteur et un autre design, par exemple ici : http://www.patternify.com/ - il suffit de définir la largeur et la hauteur du carré à 2x1.

Source d'inspiration : http://alistapart.com/article/customunderlines