奇妙的CSS3—导航栏下划线跟随效果

先来看一下效果：

1、基本效果就是这样的 ，鼠标悬停，下划线划入。鼠标离开，下划线划出

2、下划线的划入是有方向的，从左侧划入悬停，下划线由左向右伸长。从右侧划入，下划线由又往左伸长

实现思路

1、导航是由ul+li组成的，在这里显然li 的宽度是不固定的。所以，我们可能需要从 li 本身的宽度上做文章，

既然每个 li 的宽度不一定，那么它对应的下划线的长度，肯定是是要和他本身相适应的。所以 ，我们可以在li  hover  的时候，借助伪元素。将下划线作用到每个 li 的伪元素身上。

2、怎么样实现一个过渡效果的动画呢？我们可以利用相对定位+决定定位，当li  hover 的时候，下划线要从一侧运动展开。

所以，我们利用绝对定位，将 li 的伪元素的宽度设置为0，在 hover 的时候，宽度从  0 -> 100%，OK 完美

3、左移左出，右移右出的问题怎么解决

如何让线条跟随光标的移动动作，实现当从导航的左侧 li 移向右侧 li，下划线从左往右移动。同理，当从导航的右侧 li 移向左侧 li，下划线从右往左移动

我们迫切需要一种方法，能够不改变当前 hover 的 li 的下划线移动方式却能改变它下一个 li 的下划线的移动方式（好绕口）。

这里我们可以借助 ~ 选择符，完成这个艰难的使命，对于当前 hover 的 li ，其对应伪元素的下划线的定位是 left: 100%，而对于 li:hover ~ li::before，它们的定位是 left: 0

示例代码：

1、结构html部分：

<ul>
    <li>奇妙的CSS</li>
    <li>导航栏</li>
    <li>前端</li>
    <li>CSS3</li>
    <li>Javascript</li>
</ul>

2、css部分

ul {
            display: flex;
            position: absolute;
            width: 800px;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        li {
            position: relative;
            padding: 20px;
            font-size: 24px;
            color: #000;
            line-height: 1;
            transition: 0.2s all linear;
            cursor: pointer;
            list-style: none;
        }

        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;
            z-index: -1;
        }
        li:hover ~ li::before {
            left: 0;
        }

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

这就是css3之魅力