与CSS上的文本值具有相同宽度的底部边框

Question

我有一个问题，我试图在带下划线的文本中添加1 px，但是在网络上进行了大量研究后发现，唯一的方法是添加边框和底部填充

但是宽度比单词长，我希望下划线效果与单词宽度相同，效果是相同的。

这是我的小提琴

https://jsfiddle.net/0orb5h4s/1/

我尝试选择的下划线课程

/* Underline Issue */
.selected {
    border-bottom: 1px solid #000;
    /* text-decoration: underline; */
    padding-bottom: 1px;
}

Answer 1

我认为span这里是您要寻找的：

.horizontal-tabs li {
  display: inline;
  list-style-type: none;
  padding-right: 10px;
  padding-left: 10px;
}
.horizontal1,
.horizontal2 {
  border-left: 1px solid #000;
}
/* Underline Issue */

.selected span {
  text-decoration: underline;
}

<div class="tabs">
  <ul class="horizontal-tabs">
    <li class="horizontal0">Description</li>
    <li class="horizontal1">Product Care</li>
    <li class="horizontal2 selected"><span>Shipping Information</span>
    </li>
  </ul>
</div>

如果您实际上是在寻找下划线与文本之间的距离，那么如果您使用span前面提到的，则您以前的技术仍然可以使用。

.horizontal-tabs li {
  display: inline;
  list-style-type: none;
  padding-right: 10px;
  padding-left: 10px;
}
.horizontal1,
.horizontal2 {
  border-left: 1px solid #000;
}
/* Underline Issue */

.selected span {
  border-bottom: 1px solid #000;
  padding-bottom: 1px;
}

<div class="tabs">
  <ul class="horizontal-tabs">
    <li class="horizontal0">Description</li>
    <li class="horizontal1">Product Care</li>
    <li class="horizontal2 selected"><span>Shipping Information</span>
    </li>
  </ul>
</div>