纯CSS导航栏下划线滑动效果

纯CSS导航栏下划线滑动效果

问题描述

面向 C 端的产品嘛&＃xff0c;总有一些动效想要提高用户体验&＃xff0c;以下是用纯 css 实现导航栏选中下划线滑动效果

解决方案

以下是实现效果&＃xff1a;

主要代码如下&＃xff1a;

如果不想要消失的时候滑动条渐变消失&＃xff0c;直接把注释的伪元素 after 打开即可&＃xff0c;效果如下&＃xff1a;