使边框底部更接近文本

Question

Fiddle

尝试     我已经应用了行高，显示属性。但是这些都不适用于双行文本。

.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。 但它没有正常工作。

QUES：    请看看我的小提琴。如何使border-bottom与text-underline匹配？如何消除这两行之间的差距？

Answer 1

您可以插入另一个容器：

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

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