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

le problème avec l'utilisation directe de border-bottom est que même avec padding-bottom: 0 , le soulignement tend à être trop loin loin du texte pour bien paraître. Donc nous n'avons toujours pas le contrôle total.

une solution qui vous donne la précision de pixel est d'utiliser le :after pseudo é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 la propriété bottom (les nombres négatifs sont bons) vous pouvez positionner le soulignement exactement où vous le voulez.

un problème avec cette technique à se méfier est qu'elle se comporte un peu bizarre avec les enveloppements de ligne.

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 .

entrer dans les détails du style visuel de text-decoration:underline est assez futile, donc vous allez devoir aller avec une sorte de hack les supprime text-decoration:underline et le remplace par quelque chose d'autre jusqu'à ce qu'une version future 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;
}

• ajuster les valeurs en % (81% et 85%) pour changer la distance entre la ligne et le texte
• Ajuster la différence entre les deux % pour changer l'épaisseur de la ligne
• ajuster les valeurs de couleur (#222222) pour changer la couleur de soulignement
• fonctionne avec plusieurs ligne des éléments inline
• fonctionne avec n'importe quel arrière-plan

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 fait un mixin 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;
}

alors 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: Les Parties Inférieures De La Pointe

si vous avez une couleur d'arrière-plan solide, essayez d'ajouter un mince text-stroke ou text-shadow dans la même couleur que votre arrière-plan pour faire les descendeurs regarder agréable.

crédit

c'est une version simplifiée de la technique que j'ai trouvé à l'origine à https://eager.io/app/smartunderline , mais l'article a depuis été supprimé.

je sais que c'est une vieille question, mais pour un texte en ligne simple, définir display: inline-block et ensuite définir le height a bien fonctionné pour moi de contrôler la distance entre une frontière et le texte.

@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 êtes chanceux et savez ce que le texte sera, vous pouvez faire ce qui suit:

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

2. "151950920 de texte") set la couleur de police à transparent (ou rgba(0,0,0,0) )

pour souligner <h2>Processing</h2> (par exemple), changer le code du dernier enfant 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;
}

Voir mon violon .

vous devez utiliser la propriété border width et la propriété padding. J'ai ajouté un peu d'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>

une alternative pour les textes multilignes ou les liens, vous pouvez envelopper vos textes dans une portée à l'intérieur d'un élément de bloc.

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

alors vous pouvez juste ajouter la bordure-bas et le 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 /

si vous voulez:

• multiligne
• pointillé
• avec rembourrage de fond personnalisé
• Sans emballage

soulignement, vous pouvez utiliser hauteur de 1 pixel image de fond 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 second 100% par quelque chose comme px ou 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 faire votre propre modèle base64 png avec une autre couleur, hauteur et design, par exemple ici: http://www.patternify.com / - il suffit de régler la largeur carrée et la hauteur à 2x1.

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

j'ai été en mesure de le Faire à l'aide de l'U (Souligner le 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>

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