使用CSS transition和width属性可实现导航链接下划线滑动效果，通过伪元素::after创建初始宽度为0的下划线，hover时扩展至100%，配合transition实现平滑动画，支持自定义速度、颜色及居中展开等增强效果。
要在导航菜单中实现下划线滑动效果，使用CSS的 transition 和 width 属性是常见且高效的方法。这种效果常用于提升用户体验，让链接交互更生动。
基本HTML结构
先构建一个简单的导航结构：
<nav class="nav-menu"><a href="#" class="nav-link">首页</a> <a href="#" class="nav-link">关于</a> <a href="#" class="nav-link">服务</a> <a href="#" class="nav-link">联系</a> </nav>
使用伪元素创建下划线
通过 ::after 伪元素在链接下方添加一条下划线，并设置初始宽度为0：
.nav-link {
text-decoration: none;
color: #333;
display: inline-block;
position: relative;
padding: 10px 0;
}
.nav-link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: #007acc;
transition: width 0.3s ease;
}
这里关键点是将伪元素的 width 初始设为0，并用 transition 控制其变化速度和缓动方式。
悬停时展开下划线
当用户将鼠标移到链接上时，让下划线从左侧滑出并填满整个文本宽度：
.nav-link:hover::after {
width: 100%;
}
这个变化会自动被 transition 捕获，产生平滑的滑入动画。你可以根据设计需求调整：
- ease 可换成 linear、ease-in、ease-out 等
- 0.3s 可调快或慢，影响响应感
- 下划线颜色、高度、位置也可自定义
可选增强：反向收起或居中展开
若想让下划线从中向两边展开，可修改伪元素的 transform 控制：
.nav-link::after {
left: 50%;
transform: translateX(-50%);
width: 0;
}
.nav-link:hover::after {
width: 100%;
}
这样下划线会从中心向左右同时延伸，视觉更柔和。
基本上就这些。不复杂但容易忽略细节，比如定位上下文和过渡属性的书写顺序。只要结构清晰，transition 配合 width 就能做出干净利落的滑动下划线效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
