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>