我想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>

如果在li元素中添加span，则可以在span元素上使用边框样式。我编辑了您的fiddle代码并删除了一些不必要的类，这些类用于设置border-left样式。

超文本标记语言

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

CSS

.horizontal-tabs li {
    display: inline-block;
    list-style-type: none;
    padding-right: 10px;
    padding-left: 10px;
    border-left: 1px solid #000;
}
/* This removes the first border */
.horizontal-tabs li:first-child {
    border-left: none;
}

/* Underline Issue */
.horizontal-tabs li.selected span {
    border-bottom: 1px solid #000;
    padding-bottom: 1px;
    display: inline-block;
}

JSFiddle

答案是：https://jsfiddle.net/0orb5h4s/6/
刚加的

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

和

<li class="horizontal2 selected"><span>Shipping Information</span></li>

并从所选li中移除底部边框。
边框也适用于填充，这就是为什么添加跨度会将边框移动到填充内的内容。

你为什么不加一个跨度？
HTML

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

CSS

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

你可以在这里查看我的解决方案：https://jsfiddle.net/lordfox/0orb5h4s/4/
希望有帮助！：）

只需将左边距和右边距设置为auto：

margin-left: auto;
margin-right: auto;

或

margin: 0 auto;