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

306

L'utilisation de CSS, une fois le texte text-decoration:underlineappliqué, est-il possible d'augmenter la distance entre le texte et le soulignement?

css underline maxp
la source
1
Ce n'est pas exactement ce que vous demandiez, mais c'était une lecture intéressante sur le sujet: Conception CSS: Soulignés personnalisés
Peter Rowell
La distance est déterminée par une police utilisée. Essayez les polices Web sécurisées.
Alexei Danchenkov
1
CSS3 a beaucoup de nouvelles propriétés de décoration de texte de nos jours. Veuillez consulter alligator.io/css/text-decoration Exemple: text-underline-position: under;et text-decoration-skip: ink;veuillez noter que ce n'est probablement pas rétrocompatible avec les anciens navigateurs.
chocolata
1
Une autre bonne solution
w3spi
1
Votez text-underline-offsetici: bugs.chromium.org/p/chromium/issues/…
Mark Fisher

Réponses:

356

Non, mais vous pourriez aller avec quelque chose comme border-bottom: 1px solid #000et padding-bottom: 3px.

Si vous voulez la même couleur que le "soulignement" (qui dans mon exemple est une bordure), il vous suffit de laisser de côté la déclaration de couleur, c'est border-bottom-width: 1px-à- dire et border-bottom-style: solid.

Pour les multilignes, vous pouvez encapsuler vos textes multilignes dans un intervalle à l'intérieur de l'élément. Par exemple, <a href="#"><span>insert multiline texts here</span></a>il suffit d'ajouter border-bottomet paddingsur la <span>- Démo

chelmertz
la source
3
Mon seul problème avec cette astuce est lorsque j'utilise une hauteur de ligne égale à la hauteur de div, puis un alignement vertical: middle; pour le centrer, je ne peux pas utiliser cette astuce car le soulignement se retrouve sous le div.
deweydb
@deweydb: Que diriez-vous d'ajouter le padding-bottom au conteneur div également? jsfiddle.net/dYfjc/1
chelmertz
+1 Je ne savais pas qu'il fallait laisser la propriété color pour hériter de la couleur de la police - cela sauvera beaucoup de sueur et de larmes à l'avenir!
Larry
9
Je ne sais pas pourquoi cette réponse a autant de votes positifs. Cela ne fonctionne pas complètement avec les textes multilignes.
3
Pour les multilignes, vous pouvez encapsuler vos textes multilignes dans un intervalle à l'intérieur de l'élément. Par exemple, <a href="#"><span>insert multiline texts here</span></a>il suffit d'ajouter une bordure inférieure et un rembourrage sur le <span>. jsfiddle.net/Aishaterr/vrpb2ey7/1
Daniel Hernandez
133

Mise à jour 2019: le groupe de travail CSS a publié un projet de décoration de texte niveau 4 qui ajouterait une nouvelle propriété text-underline-offset(ainsi que text-decoration-thickness) pour permettre de contrôler l'emplacement exact d'un soulignement. Au moment de la rédaction de ce document, il s'agit d'un projet préliminaire et n'a été implémenté par aucun navigateur, mais il semble que cela rendra la technique ci-dessous obsolète.

Réponse originale ci-dessous.

Le problème avec l'utilisation border-bottomdirecte est que même avec padding-bottom: 0, le soulignement a tendance à être trop éloigné du texte pour bien paraître. Nous n'avons donc toujours pas un contrôle complet.

Une solution qui vous donne une précision en pixels est d'utiliser le :afterpseudo-élément:

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

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

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

En changeant le bottom propriété (les nombres négatifs conviennent), vous pouvez positionner le soulignement exactement où vous le souhaitez.

Un problème avec cette technique pour se méfier est qu'elle se comporte un peu bizarrement avec les sauts de ligne.

dernier enfant
la source
2
Cela ne fonctionnera pas pour mon problème particulier, mais c'est une astuce fantastique. +1
11
Bon travail, mais cela ne fonctionnera pas pour les ancres qui s'étendent sur plusieurs lignes
Willster
@ last-child Celui-ci est meilleur que le soulignement, mais avec l'
habillage de
Un problème est qu'un bord inférieur et un soulignement sont deux choses différentes. Par exemple, une partie du texte doit s'étendre sous le soulignement. Si vous définissez des a-tags comme des boutons, vous n'avez aucune liberté d'utiliser border-bottom comme soulignement.
Anders Lindén
10
Imaginez dire à quelqu'un qui est nouveau dans le développement Web, un graphiste, un utilisateur moyen ou votre maman, que c'est ce qui est nécessaire pour ajouter un espace contrôlé entre le texte et c'est souligné et ils se demanderont ce que vous faites de votre vie .
MarcGuay
79

Vous pouvez utiliser ceci text-underline-position: under

Voir ici pour plus de détails: https://css-tricks.com/almanac/properties/t/text-underline-position/

Voir également la compatibilité du navigateur .

Duc Huynh
la source
2
Merci! Si vous essayez de faire un soulignement en pointillés et de voir qu'il est dessiné sans espace entre le bas du texte et la ligne, cela résout le problème.
Jonathan Cross
6
C'est la bonne réponse pour les navigateurs modernes sans aucune solution de contournement.
Paras Shah
2
Il ne fonctionne pas dans Firefox, pas même avec le préfixe du fournisseur - mais il est dans une spécification W3C: w3.org/TR/css-text-decor-3/#text-underline-position-property . Autre ressource pertinente: quackit.com/css/css3/properties/css_text-underline-position.cfm
rosell.dk
4
À partir de ce moment, cela ne fonctionne vraiment que dans le navigateur Chrome et n'est pas une solution pour les autres navigateurs.
miir
2
Eh bien, à la date de ce commentaire, je vois que cela fonctionne aussi dans Firefox .
Jarad
15

Voici ce qui fonctionne bien pour moi. 

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>
Développer l'extrait

Jordan Starrk
la source
2
Il est important de noter que ce text-underline-positionn'est pas pris en charge sous Firefox selon developer.mozilla.org/en-US/docs/Web/CSS/…
Floran Gmehlin
Très intéressant. Grande légende. Je vous remercie!
Jordan Starrk
Pris en charge dans Firefox à partir de 74, selon le même lien.
GSerg
11

Entrer dans les détails du style visuel de text-decoration:underlineest à peu près futile, donc vous allez devoir aller avec une sorte de piratage les supprime text-decoration:underlineet le remplace par quelque chose d'autre jusqu'à ce qu'une future version lointaine magique de CSS nous donne plus de contrôle .

Cela a fonctionné 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>
Développer l'extrait

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

Voici une version avec toutes les propriétés propriétaires pour une certaine compatibilité descendante:

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 fait un mixage scss pour ça. Si vous n'utilisez pas SASS, la version régulière 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 ceci:

$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: Astuce des descendeurs

Si vous avez une couleur d'arrière-plan unie, essayez d'ajouter une fine text-strokeou text-shadowde la même couleur que votre arrière-plan pour rendre les descendants agréables.

Crédit

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

squarecandy
la source
Malheureusement, le lien eager.io ne fonctionne plus. Vous rappelez-vous quel était le hack pour rendre les descendeurs plus beaux?
kano
1
@Kano - Je crois qu'il utilisait l'ombre de texte de la même couleur qu'un arrière-plan uni.
squarecandy
De plus, avec la technique ci-dessus, vous pouvez définir une couleur de soulignement différente du texte, donc parfois je la définis pour être plus claire que le texte, ce qui rend les collisions avec les descendants moins problématiques pour la lisibilité.
squarecandy
7

Je sais que c'est une vieille question, mais pour le réglage du texte sur une seule ligne display: inline-block, puis le réglage, cela heighta bien fonctionné pour moi pour contrôler la distance entre une bordure et le texte.

Dominic P
la source
1
Je n'avais pas besoin de régler la hauteur. Je l'ai juste enveloppé dans une autre div et comme je voulais qu'il soit centré, j'ai simplement défini l'alignement du texte sur la div.
Guy Lowe
6

@ la réponse du dernier enfant 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 dynamiquement votre CSS, ou si comme moi vous avez de la chance et savez quel sera le texte, vous pouvez faire ce qui suit:

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

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

pour souligner <h2>Processing</h2>(par exemple), changez le code du dernier enfant en:

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;
}
Michael Greisman
la source
9
Les H2 sont des éléments de bloc qui pourraient expliquer pourquoi le soulignement était plus long que le texte. Peut display: inline-block- être le réparerait. Remplacer le texte par contentressemble à un hack qui pourrait se casser de plusieurs façons.
dernier enfant
3

Voir mon violon .

Vous devez utiliser la propriété de largeur de bordure et la propriété de remplissage. J'ai ajouté une animation pour le rendre 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>
Développer l'extrait

poussière d'étoiles
la source
2

Une alternative pour les textes ou liens multilignes, vous pouvez encapsuler vos textes dans un intervalle à l'intérieur d'un élément de bloc. 

<a href="#">
    <span>insert multiline texts here</span>
</a>

alors vous pouvez simplement ajouter une bordure inférieure et un rembourrage sur le <span>.

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

Vous pouvez vous référer à ce violon. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

Daniel Hernandez
la source
2

Si tu veux:

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

souligner, vous pouvez utiliser une image d' arrière-plan de 1 pixel de hauteur avec repeat-xet 100% 100%position:

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

Vous pouvez remplacer le second 100%par autre chose comme pxou empour ajuster la position verticale du soulignement. Vous pouvez également utiliser calcsi vous souhaitez 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 png base64 avec une autre couleur, hauteur et 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

mcmimik
la source
1

Si vous utilisez text-decoration: underline;, vous pouvez ajouter de l'espace entre le soulignement et le texte en utilisanttext-underline-position: under;

Pour en savoir plus Les propriétés text-underline-position, vous pouvez voir ici

Ifrah
la source
0

J'ai pu le faire en utilisant le U (balise de soulignement)

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>
Arun Prasad ES
la source
0

C'est ce que j'utilise:

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
Constantinos Constantinou
la source
0

Ce que j'utilise:

<span style="border-bottom: 1px solid black"> Enter text here </span>
Francis Acosta
la source