明确需求定义：要求实现一个 CSS 导航栏，光标下划线跟随，仅使用 CSS 完成。分析实现难点，首先面对的是 li 宽度不固定这一挑战。考虑利用边框 bottom 来适应不同宽度。示例代码展示：li 元素的 border-bottom 设置为 2px 实线。观察布局，隐藏下划线以明确初始状态。引入伪元素作为下划线载体，解决隐藏问...
不可思议的纯CSS导航栏下划线跟随效果
探讨纯 CSS 实现导航栏下划线跟随效果的技术
首先，展示一下实现这一效果的示意图，思考如何仅使用 CSS 来完成下划线跟随光标移动的视觉效果，无需借助 JavaScript。
回顾业务开发过程中遇到的类似挑战，尽管借助 JavaScript 可能较为直观，但尝试纯 CSS 解决这一问题激发了创新思维。
明确需求定义：要求实现一个 CSS 导航栏，光标下划线跟随，仅使用 CSS 完成。
分析实现难点，首先面对的是 li 宽度不固定这一挑战。考虑利用边框 bottom 来适应不同宽度。
示例代码展示：li 元素的 border-bottom 设置为 2px 实线。
观察布局，隐藏下划线以明确初始状态。
引入伪元素作为下划线载体，解决隐藏问题。将下划线作用到每个 li 元素上。
通过绝对定位与 hover 动画实现下划线从无到有，宽度变化。
解决线条跟随光标移动的关键，引入伪元素的 ~ 选择符，巧妙地调整下划线的初始位置与移动方向。
运用 transition 属性与动画延迟，优化视觉体验，使效果更加平滑。
完整实现案例可参考 CodePen Demo，展示最终效果。
此方法虽在特定场景下存在局限性，如进入第一个 li 时下划线移动方向的特殊性，但整体实现了下划线跟随效果，展示了 CSS 的灵活性与强大功能。2024-09-08
