黄良钵博客

程序开发 纯css制作导航下划线

不可思议的纯CSS导航栏下划线跟随效果 先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？ <ul>   <li>不可思议的CSS</li>   <li>导航栏</li>   <li>光标下划线跟随</li>   <li>PURE CSS</li>   <li>Coco</li> </ul> CSS ul {     display: flex;     position: absolute;     width: 800px;     top: 50%;     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; } 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; }