純css導航欄下劃線

.nav-underline > *{/* 指定容器，裡面可以是li、span等多樣化的元素 */
  display: inline-block;
  margin: -3px;
  padding: 10px 15px;
  position: relative;
  cursor: pointer;
}
.nav-underline > *::before {/* 通過僞元素實作下劃線效果 */
  content: \'\';
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #1DA3FC;
  transition: 0.2s all linear;
}
.nav-underline > *:hover::before {
  width: 100%;
  left: 0;
}
.nav-underline > *:hover ~ *::before {/* 關鍵性的連貫效果就在于 ~ 選擇符 */
  left: 0;
}      

<ul class="nav-underline">
    <li>不可思議的css</li>
    <li>導航欄</li>
    <li>pure css</li>
    <li>光标下劃線跟随</li>
    <li>Nav underline</li>
  </ul>