ボーダーボトムの長さを制御する方法は？

Question

ここに私が複製しようとしているイメージがあります。

ここで私はこれまで持っているリンクです。

私の問題は、ボーダーボトムの長さが含まれている要素の全幅に相当することです。取り付けられた画像から、ボーダーボトムは少し短く中央に配置する必要があります。デフォルトで

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

あなたは、リスト項目に要素の後、擬似を追加し、その後のbo​​rder-topプロパティを追加することができます。

li:after{ 

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

} 

絶対的な位置に配置したり、必要に応じて調整したりすることができます。