使用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 在每个链接下方添加一条窄线，并设置过渡动画：

立即学习“前端免费学习笔记（深入）”；

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

.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，性能好，兼容性也强。