CSS导航菜单悬停下划线动画实现技巧

前往漫画官网入口并下载

珍惜时间，勤奋学习！今天给大家带来《CSS导航菜单悬停下划线动画实现方法》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

使用CSS ::after伪元素和transition实现悬停下划线动画。1. 构建导航结构；2. 设置链接基础样式；3. 添加::after伪元素并定义宽度过渡；4. 通过hover触发width:100%实现展开效果，支持左右或居中动画，流畅且兼容性强。

要实现导航菜单在悬停时出现下划线动画效果，可以使用 CSS 的 ::after 伪元素结合 transition 控制宽度变化。这种方式视觉流畅，适合现代网页设计。

1. 基础结构：HTML 菜单

先构建一个简单的导航结构：

<nav class="menu">
  <a href="#" class="active">首页</a>
  <a href="#">关于</a>
  <a href="#">服务</a>
  <a href="#">联系</a>
</nav>

2. 设置基础样式

为导航链接设置基本样式，隐藏默认下划线，定位伪元素：

.menu a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  position: relative;
  display: inline-block;
}

3. 使用 ::after 创建下划线

通过 ::after 在每个链接下方添加一条窄线，并设置过渡动画：

.menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #007acc;
  transition: width 0.3s ease;
}

.menu a:hover::after {
  width: 100%;
}

这样，鼠标移上时，下划线会从左向右伸展出来。

4. 可选优化：居中展开动画

如果希望下划线从中间向两边展开，可以调整伪元素的初始状态：

.menu a::after {
  left: 50%;
  transform: translateX(-50%);
  width: 0;
}

.menu a:hover::after {
  width: 100%;
}

利用 transform 实现中心对齐扩展，视觉更优雅。

基本上就这些。使用 ::after 和 transition 控制 width，就能轻松做出平滑的悬停下划线动画，不依赖 JavaScript，性能好，兼容性也强。

今天关于《CSS导航菜单悬停下划线动画实现技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！