オンホバー下端ボーダーオーバーラップdivを作成するには？

Question

私は、並べ替えられていないリストを使って、水平ナビゲーションメニューを持っています。メニューの下には、親コンテナの幅が100％でなければならない直線の灰色の線があります。リスト要素をホバリングするとき、行の一部はリスト要素の真下で青色に着色する必要があります。私はこれを行う適切な方法を見つけることができません。私はそれをポジション：relativeとtopを追加しました：14pxしかし、フォントサイズやフォントの面の変更はすべてを破壊するので、それは本当に私を満足させるものではありません。私はまた、要素間のマージンをパディングに変更し、李の高さを上げて、それぞれに同じ灰色の境界線を与え、ホバリング時に色を変えるだけのことを考えましたが、親divの幅に沿って線を移動する必要があります。 expected result

私の現在のコード：

#container { 
 
    width: 80%; 
 
    margin: auto; 
 
    background-color: white; 
 
} 
 

 
#container ul { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-top: 5px; 
 
    margin-bottom: 10px; 
 
} 
 

 
#container ul li { 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 

 
#container ul li:first-child { 
 
    margin-left: 0; 
 
} 
 

 
#container ul li a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
#container ul li a:hover { 
 
    color: grey; 
 
} 
 

 
#container #slider { 
 
    display: inline-block; 
 
    height: 5px; 
 
    background-color: #f1f1f1; 
 
    width: 100%; 
 
}

<div id="container"> 
 
    <ul> 
 
    <li><a href="#">INDEX</a></li> 
 
    <li><a href="#">HELP</a></li> 
 
    <li><a href="#">LONG LINK TEXT</a></li> 
 
    </ul> 
 
    <span id="slider"></span> 
 
</div>

JSFiddle：https://jsfiddle.net/9fhvyk76/3/

Answer 1

あなたはより多くを持っているので、あなたは、疑似要素を使用したいと思うことが見えるように持っているどのように サイズや位置を制御しても、実際にはほとんど変更する必要はありません。リンク自体に相対的な位置を追加するだけで、擬似のスケールと位置が関連付けられます。これがあなたが探していたものかどうか私に教えてください！

https://jsfiddle.net/g00jrsqf/

#container ul li a{ 
    position: relative; 
} 
#container ul li a:after{ 
    content: ''; 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 4px; 
    background: #01a2e8; 
    opacity: 0; 
    left: 0; 
    bottom: -29px; 
} 
#container ul li:hover a:after{ 
    opacity: 1; 
}