CSS菜单下划线幻灯片没有javascript吗？

Question

我创建了一支笔，它在菜单中的元素之间具有很好的滑动效果。

<ul>
  <li id="home"><a>home</a></li>
  <li id="libra"><a>libra</a></li>
   <li id="libra2"><a>libra22</a></li>
  <div class="line"></div>
</ul>

ul {
  list-style: none;
  padding: 0;
  background: black;
  color: white;
}

ul li {
  display: inline-block;
}

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

ul li a {
  width: 100px;
  text-align: center;
  display: block;
}

.line {
 width: 100px;
  height: 5px;
  background: red;
    transition: all 500ms ease-in-out;
}

#libra:hover ~ div {
  margin-left: 100px;
}

https://codepen.io/anon/pen/vPxmZV

但是，这仅适用于前进，而不能适用于后退，并且它不是动态的，因此您预先设置了下划线的边距量以随着过渡而滑动。

有没有一种方法可以使其向前和向后工作，并且在没有JavaScript的情况下是动态的？

如果没有，使用javascript最好的干净方法是什么？

解释例如，当前它是硬编码的，因此，如果将鼠标悬停在#libra下划线将向右移100px，因此当前我需要为数组中的每个元素添加该大小写，例如，下一个元素将向左留200px，等等。

Answer 1

我已经使用Translate属性创建了它：

没有硬编码，您将不得不使用带有大量计算的javascript

 nav { height: 50px; font-size: 20px; padding: 10px; width: 100%; z-index: 1; background:black; } nav ul, nav li, nav a { display: inline; text-decoration: none; list-style: none; outline: none; color: ghostwhite; } nav ul:hover, nav li:hover, nav a:hover { color: white; text-decoration: none; } nav ul:nth-child(2):hover ~ .line, nav li:nth-child(2):hover ~ .line, nav a:nth-child(2):hover ~ .line { -webkit-transform: translate(110px); transform: translate(110px); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } nav ul:nth-child(3):hover ~ .line, nav li:nth-child(3):hover ~ .line, nav a:nth-child(3):hover ~ .line { -webkit-transform: translate(240px); transform: translate(240px); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } nav ul:nth-child(4):hover ~ .line, nav li:nth-child(4):hover ~ .line, nav a:nth-child(4):hover ~ .line { -webkit-transform: translate(340px); transform: translate(340px); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } nav ul:nth-child(5):hover ~ .line, nav li:nth-child(5):hover ~ .line, nav a:nth-child(5):hover ~ .line { -webkit-transform: translate(450px); transform: translate(450px); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } nav ul:nth-child(2):hover ~ .line, nav li:nth-child(2):hover ~ .line, nav a:nth-child(2):hover ~ .line { -webkit-transform: translate(110px); transform: translate(110px); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } nav li { margin: 0 20px; display: inline-block; } nav ul { position: absolute; right: 20px; } nav .line { margin-top: 5px; width: 120px; height: 3px; background-color: white; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } 

  <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#product-test">Products</a></li> <li><a href="#quote">Quota</a></li> <li><a href="#about">About</a></li> <li><a href="contact.html">Contact</a></li> <div class="line"></div> </ul> </div> </nav>