css - 如何使悬停底部边框与下面的 div 重叠？

Question

我有一个使用无序列表的水平导航菜单。菜单下有一条灰色直线，其宽度必须为父容器的 100%。将鼠标悬停在列表元素上时，线的一部分必须在列表元素下方显示为蓝色。我找不到任何合适的方法来做到这一点。我让它与 position:relative 一起工作并添加 top: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

您需要使用伪元素，这样您就可以更好地控制大小/位置，而无需真正进行太多更改。只需添加 position: relative 到链接本身，以便伪的比例和定位与其相关联。让我知道这是否是您要找的东西!

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;
}