rapprochera fond frontière du texte

Question

Fiddle

Essayez J'ai appliqué hauteur de ligne, les propriétés d'affichage. Mais rien de tout cela fonctionne bien avec un texte doublé.

.container span { 
 
    width:80px; 
 
    border-bottom: 1px solid #aaa; 
 
    text-decoration: underline; 
 
} 
 
.container { 
 
    width: 20%; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <span>My Cash & Discounts</span> 
 
    (0) 
 
</div>

I have found this. Mais ça ne marche pas très bien.

Ques: S'il vous plaît jeter un oeil à mon violon. Comment faire border-bottom pour correspondre avec le texte souligné? Comment supprimer l'écart entre ces deux lignes?

Answer 1

Vous pouvez insérer un autre conteneur:

<div class="container"> 
    <span><span class="inner">My Cash &amp; Discounts</span></span> 
    (0) 
</div> 

et lui attribuer une valeur négative pour margin-bottom:

.container span 
{ 
    border-bottom: 1px solid #aaa; 
    text-decoration: underline; 
    display:inline-block; 
} 

.container span.inner { 
    border:none; 
    display:block; 
    margin-bottom:-3px; 
} 

.container 
{ 
    width: 20%; 
    display: inline-block; 
}