如何控制边框底部长度？

Question

这是我试图复制的图片。

这是我到目前为止所获得的链接。

我的问题是border-bottom长度对应于包含元素的全宽。从附图中看，边框底部应该稍短并居中。

http://jsbin.com/tukomuwuri/edit?html,css,output

Answer 1

您可以将伪后元素添加到列表项，然后添加border-top属性。

li:after{

  content: "";
  display:block;
  border-top: 4px solid color;
  width: /* your desired width*/

}

您可以给它一个绝对的位置来居中或者根据需要对齐它。

Answer 2

默认情况下，边框将拉伸块级元素的宽度（在本例中为<a>）。

为了达到理想的效果，您需要实际减小<a>的宽度。您可以通过填充包含<li>：

来执行此操作

li {
  background-color: white;
  padding: 0 40px;
  position: relative;
  &:hover {
    background-color: #e5e8e8;
    a:before {
      content: '|';
      position: absolute;
      top: 10px;
      left: -15px;
    }
  }
}

以下是这个例子： http://jsbin.com/ciqujidupa/3/edit?html,css,output