如何控制边界底部长度？

Question

这是我试图复制的图像。

这里是到目前为止，我已经得到了链接。

我的问题是border-bottom length对应于contains元素的全角宽度。从附图中可以看出，边框底部应该稍微短一些，并且居中。

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

Answer 1

默认情况下，边界将要拉伸块级元素的宽度（在这种情况下，<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

Answer 2

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

li:after{ 

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

} 

你可以给它一个绝对的位置来居中或对齐它，但是你想要的。