答案：通过css实现导航栏下划线动画提升交互体验，常用方法包括悬停时从左到右展开、从中向两侧伸展、滑动跟随当前项及border-bottom过渡，核心利用transition与伪元素控制视觉反馈，细节调整可优化效果。
导航栏下划线动画是提升用户体验的常见交互效果，通过CSS可以轻松实现文字底部的下划线平滑出现或滑动进入的效果。下面介绍几种实用且美观的实现方式。
1. 悬停时从左到右展开下划线
使用 ::after 伪元素创建下划线，初始隐藏，鼠标悬停时宽度从0展开到100%。
.nav-link { position: relative; text-decoration: none; color: #333; padding: 10px 0; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: 5px; width: 0; height: 2px; background-color: #007acc; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; }
2. 下划线从中向两侧展开
通过设置伪元素的初始宽度为0，但定位居中，利用 transform 实现双向伸展。
.nav-link::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 0; height: 2px; background-color: #007acc; transition: width 0.3s ease, left 0.3s ease; } .nav-link:hover::after { width: 100%; left: 0; }
3. 下划线滑动跟随（当前项指示）
适用于高亮当前页面的导航项，也可配合javaScript实现“滑块”跟随鼠标或焦点移动。
立即学习“前端免费学习笔记（深入）”；
基础结构：
.nav { display: flex; list-style: none; padding: 0; } .nav-item { position: relative; margin-right: 30px; } .nav-link { text-decoration: none; color: #333; padding: 10px 0; } .underline { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #007acc; transition: width 0.3s ease, transform 0.3s ease; } .nav-item:hover .underline { width: 100%; transform: scaleX(1); }
html示例：
<li class="nav-item"> <a href="#" class="nav-link">首页</a> <span class="underline"></span> </li>
4. 使用border-bottom模拟并过渡
更简洁的方式：直接用 border-bottom，结合color和width变化。
.nav-link { text-decoration: none; color: #333; padding: 10px 0; border-bottom: 2px solid transparent; transition: border-bottom-color 0.3s ease; } .nav-link:hover { border-bottom-color: #007acc; }
基本上就这些常用方法。选择哪种取决于设计风格——全展开、居中扩散还是简约变色。核心是利用 transition 和伪元素控制视觉反馈，让导航更具互动感。不复杂但容易忽略细节，比如位置偏移或过渡延迟，调一调就顺了。