CODEWITHSUNDEEP
htmlcss
Gibbs
Gibbs

Reputation: 22974

Make border-bottom closer to the text

Fiddle

Try I have applied line-height, display properties. But none of these works fine with double lined text.

.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. But it's not working fine.

Ques: Please take a look at my fiddle. How to make border-bottom to match with text-underline? How to remove the gap between that two lines?

Upvotes: 0

Views: 912

Answers (1)

uruk
uruk

Reputation: 1326

You could insert another container:

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

And assign a negative value for 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;
}

Upvotes: 1

Related Questions