如何控制邊界底部長度？

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

} 

你可以給它一個絕對的位置來居中或對齊它，但是你想要的。