纯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>