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

Utiliser CSS, quand le texte a du text-decoration:underline appliqué, est-il possible d’augmenter la distance entre le texte et le soulignement?

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

    Si vous voulez la même couleur du “soulignement” (qui dans mon exemple est une bordure), vous n’avez qu’à border-bottom-width: 1px la déclaration de couleur, c’est border-bottom-width: 1px dire border-bottom-width: 1px et border-bottom-style: solid .

    Pour multiligne, vous pouvez envelopper des textes multilignes dans un intervalle à l’intérieur de l’élément. Par exemple, insert multiline texts here puis append simplement border-bottom et padding sur la – Demo

    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é du texte pour bien paraître. Donc, nous n’avons toujours pas le contrôle complet.

    Une solution qui vous offre la précision des pixels consiste à utiliser le pseudo-élément suivant:

     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 sont corrects), vous pouvez positionner le soulignement exactement où vous le souhaitez.

    Un problème avec cette technique est qu’elle se comporte un peu avec les lignes.

    Vous pouvez utiliser cette text-underline-position: under

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

    Voir aussi la compatibilité du navigateur .

    Entrer dans les détails du style visuel de la text-decoration:underline de text-decoration:underline est à peu près inutile, il va donc falloir aller avec une sorte de hack le text-decoration:underline et le remplacer par quelque chose d’autre version future 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; } 
    • Ajustez les valeurs% (81% et 85%) pour modifier la distance entre la ligne et le texte
    • Ajustez la différence entre les deux valeurs% pour modifier l’épaisseur de la ligne
    • ajuster les valeurs de couleur (# 222222) pour changer la couleur de soulignement
    • fonctionne avec plusieurs éléments en ligne
    • travaille 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 de 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; } 

    alors utilisez-le comme ça:

     $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’append un text-stroke text-shadow ou une text-shadow text-stroke mince dans la même couleur que votre arrière-plan pour que les descendeurs soient agréables.

    Crédit

    Ceci est 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é supprimé.

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

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

    Cependant, l’ajout d’une bordure à mon H2 produisait un soulignement plus long que le texte.

    Si vous écrivez dynamicment votre CSS ou si, comme moi, vous avez de la chance et que vous connaissez le texte, vous pouvez procéder comme suit:

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

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

    pour souligner

    Processing

    (par exemple), modifiez 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; } 

    Voir mon violon

    Vous devez utiliser la propriété de largeur de bordure et la propriété de remplissage. J’ai ajouté de l’animation pour que ça paraisse 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; } 
     Somewhere ... over the rainbow (lalala) , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a what a wonder-ful world! World! 

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

      insert multiline texts here  

    alors vous pouvez simplement append border-bottom et padding sur le .

     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/

    Si tu veux:

    • multiligne
    • pointé
    • avec un rembourrage de fond personnalisé
    • sans emballage

    souligné, vous pouvez utiliser une image d’ arrière-plan d’une hauteur de 1 pixel avec une position repeat-x et 100% 100% :

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

    Vous pouvez remplacer le second 100% par quelque chose comme px ou em pour ajuster la position verticale du soulignement. Vous pouvez aussi utiliser calc si vous voulez append un remplissage vertical, par exemple:

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

    Bien sûr, vous pouvez aussi créer votre propre motif png base64 avec une autre couleur, hauteur et design, par exemple ici: http://www.patternify.com/ – définissez simplement la largeur et la hauteur du carré à 2×1.

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

    J’ai pu le faire en utilisant le U (Tag Underline)

     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; }  
    Shop Now

    C’est ce que j’utilise:

    html:

     
    GET IN TOUCH

    css:

     .horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }