使用CSS transition和width属性可实现导航链接下划线滑动效果，通过伪元素::after创建初始宽度为0的下划线，hover时扩展至100%，配合transition实现平滑动画，支持自定义速度、颜色及居中展开等增强效果。
要在导航菜单中实现下划线滑动效果，使用CSS的 transition 和 width 属性是常见且高效的方法。这种效果常用于提升用户体验，让链接交互更生动。
先构建一个简单的导航结构：
<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 捕获，产生平滑的滑入动画。你可以根据设计需求调整：
若想让下划线从中向两边展开，可修改伪元素的 transform 控制：
.nav-link::after {
left: 50%;
transform: translateX(-50%);
width: 0;
}
.nav-link:hover::after {
width: 100%;
}
这样下划线会从中心向左右同时延伸，视觉更柔和。
基本上就这些。不复杂但容易忽略细节，比如定位上下文和过渡属性的书写顺序。只要结构清晰，transition 配合 width 就能做出干净利落的滑动下划线效果。
以上就是如何在CSS中使用过渡制作导航下划线滑动_effect width transition控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
472
收藏
