on-hover 하단 테두리 겹침 div 만드는 방법은 무엇입니까?

Question

정렬되지 않은 목록을 사용하는 가로 탐색 메뉴가 있습니다. 메뉴 아래에는 부모 컨테이너의 너비가 100 % 인 직선이 그려져 있습니다. 목록 요소를 가리키면 해당 행의 일부가 목록 요소 바로 아래에 파란색으로 표시되어야합니다. 이 일을하기에 적합한 방법을 찾을 수 없습니다. 상대방과 상대방을 추가하고 14px를 추가했지만 글꼴 크기 나 글꼴 얼굴을 변경하면 모든 것을 파괴 할 것이므로 실제로 만족스럽지 않습니다. 또한 패딩에 요소 사이의 여백을 변경하고 li의 높이를 늘리며 각 회색 테두리를주고 호버에서 색상을 변경하는 방법에 대해 생각했지만 부모 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; 
}