纯css实现导航栏下划线跟随效果

[zgw010]

效果演示： https://codepen.io/Hasaki1997/pen/wmxxNO

利用了伪元素来实现，默认效果是下划线从右边出现，再利用～选择器，选定鼠标所指的 li 元素的后一个li标签，使其下划线是从左边出现，这样就基本实现了下划线跟随效果。

缺陷是 鼠标移动到第一个 li 元素的时候 下划线是从右边出现的，看起来怪怪的

html

<ul>
  <li>不可思议的css</li>
  <li>导航栏</li>
  <li>光标下划线的跟随</li>
  <li>PURE CSS</li>
  <li>Nav</li>
</ul>

css

ul {
    list-style-type:none;
    display: flex;
    position: absolute;
    width: 800px;
    /* 导航栏居中 */
    /* top: 50%; */
    left: 50%;
    transform: translateX(-50%/* , -50% */);
}

li {
    position: relative;
    padding: 20px;
    padding-top: 0;  
    padding-bottom: 10px;  
    font-size: 24px;
    color: #000;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer;
}

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}

li:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #000;
}

li:hover ~ li::before {
    left: 0;
}

li:active {
    background: #000;
    color: #fff;
}

来源：chokcoco/iCSS#33

[wenwang3]

代码很正确