css鼠标跟随导航下划线效果

效果图：

html代码：

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

css:

*{ margin:0; padding:0;}
        ul{list-style: none;}
        ul {
            display: flex;
            position: absolute;
            width: 800px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        li {
            position: relative;
            padding: 20px;
            font-size: 14px;
            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{ left:0; width:100%;}
        li:hover ~ li::before{ left:0;}

以上可自行测试一下。

参考：https://juejin.im/post/5ab9e9056fb9a028be360292

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/634

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！