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

Si vous utilisez text-decoration: underline; Vous pouvez alors ajouter de l'espace entre le soulignement et le texte à l'aide de la touche text-underline-position: under;

Pour en savoir plus sur les propriétés text-underline-position, vous pouvez regarder aquí

Answer 2

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

Answer 3

Une alternative pour les textes multilignes ou les liens, vous pouvez envelopper vos textes dans un span à 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 l'écran <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/

Answer 4

J'ai réussi à le faire en utilisant la balise 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>

Answer 5

Ce que j'utilise :

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