如何在CSS中使用过渡制作导航下划线滑动_effect width transition控制

你在学习文章相关的知识吗？本文《如何在CSS中使用过渡制作导航下划线滑动_effect width transition控制》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

使用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 就能做出干净利落的滑动下划线效果。

好了，本文到此结束，带大家了解了《如何在CSS中使用过渡制作导航下划线滑动_effect width transition控制》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！