答案：通过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 和伪元素控制视觉反馈，让导航更具互动感。不复杂但容易忽略细节，比如位置偏移或过渡延迟，调一调就顺了。
