web-dev-qa-db-fra.com

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

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

cssunderline
222
maxp

Non, mais vous pourriez utiliser quelque chose comme border-bottom: 1px solid #000 et 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 la déclaration de couleur, c'est-à-dire border-bottom-width: 1px et border-bottom-style: solid.

Pour multiligne, vous pouvez envelopper des textes multilignes dans une étendue à l'intérieur de l'élément. Par exemple. <a href="#"><span>insert multiline texts here</span></a> puis ajoutez simplement border-bottom et padding sur le <span> - Demo

284
chelmertz

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

Une solution permettant d'obtenir une précision en pixels consiste à utiliser le pseudo-élément :after:

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 modifiant la propriété bottom (les nombres négatifs conviennent), vous pouvez positionner le soulignement exactement où vous le souhaitez.

Un problème avec cette technique à prendre en compte est qu’elle se comporte un peu bizarre avec des retours à la ligne.

90
last-child

Vous pouvez utiliser ce text-underline-position: under

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

Voir aussi compatibilité du navigateur .

57
Duc Huynh

Entrer dans les détails du style visuel de text-decoration:underline est plutôt inutile, vous devrez donc utiliser une sorte de hack pour supprimer le text-decoration:underline et le remplacer par quelque chose d'autre jusqu'à ce qu'une version lointaine et magique de CSS nous le fournisse 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;
}
  • 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 changer l'épaisseur de la ligne
  • 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 compatibilité ascendante:

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 mix SCSS pour cela. Si vous n'utilisez pas SASS, la version standard 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 de fond unie, essayez d’ajouter un text-stroke ou un text-shadow mince dans la même couleur que votre fond pour que les descendeurs aient l’air agréable.

Crédit

Ceci est une version simplifiée de la technique que j'avais initialement trouvée sur https://eager.io/app/smartunderline , mais l'article a depuis été supprimé.

11
squarecandy

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

6
Dominic P

@ La réponse du dernier enfant est une excellente réponse! 

Cependant, l'ajout d'une bordure à mon H2 a entraîné 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 procéder comme suit:

  1. changer la content en quelque chose de la bonne longueur (ie le même

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

pour souligner <h2>Processing</h2> (par exemple), modifier le code du dernier enfant pour qu'il soit: 

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;
}
6
Michael Greisman

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>

3
MeikoDYang

Si tu veux:

  • multiligne
  • à pois
  • avec rembourrage personnalisé
  • sans emballage

souligné, vous pouvez utiliser 1 pixel height image d’arrière-plan avec repeat-x et 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 comme px ou em pour ajuster la position verticale du soulignement. Vous pouvez également utiliser calc si vous souhaitez ajouter un remplissage vertical, par exemple:

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

Bien entendu, vous pouvez également créer votre propre modèle png base64 avec une autre couleur, hauteur et design, par exemple. ici: http://www.patternify.com/ - il suffit de régler la largeur et la hauteur des carrés à 2x1.

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

1
mcmimik

Une alternative aux textes multilignes ou aux liens, vous pouvez envelopper vos textes dans une étendue à l'intérieur d'un élément de bloc. 

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

alors vous pouvez simplement ajouter border-bottom et padding 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/

1
Daniel Hernandez

Si vous utilisez text-decoration: underline;, vous pouvez ajouter un espace entre le soulignement et le texte en utilisant text-underline-position: under;

Pour plus Les propriétés text-underline-position, vous pouvez avoir look here

0
Ifrah

J'ai été capable de le faire en utilisant le U (Underline Tag)

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>
0
Arun Prasad E S

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; }
0
Constantinos Constantinou

Ce que j'utilise:

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