如何实现导航链接的平滑下划线悬停动画-html教程

本文详解如何使用纯 css 为导航菜单中的 “ 标签添加从左到右展开的下划线悬停效果，包含完整 html 结构、可复用样式代码、关键原理说明及常见避坑提示。

要实现类似 poosh.com 那样简洁专业的导航下划线悬停动画（即鼠标移入时，一条细线从左向右平滑展开），核心在于将伪元素 ::before 附加到 标签上，而非父级容器（如 ul），并结合 transform: scaleX() 与 transition 实现高性能缩放动画。

以下是经过验证的完整实现方案：

✅ 正确的 HTML 结构

✅ 推荐的 CSS 样式（含注释）

/* 确保导航容器不干扰定位 */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 推荐：使菜单项水平排列 */
}

nav li {
  margin-right: 2rem;
}

nav a {
  position: relative;
  text-decoration: none; /* 移除默认下划线 */
  color: #000;
  font-weight: 500;
  padding: 0.5rem 0; /* 垂直内边距提升点击区域 */
}

/* 悬停下划线：绝对定位 + 缩放动画 */
nav a::before {
  content: '';
  position: absolute;
  bottom: -2px;        /* 精准贴合文字底部，-2px 是常用安全值 */
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: left center; /* 更自然的起点，兼容性优于 bottom left */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 使用缓动增强质感 */
}

nav a:hover::before {
  transform: scaleX(1);
}

⚠️ 关键要点与避坑指南

• 伪元素必须挂载在 上：原问题中错误地将 ::after 添加在 ul 上，导致下划线覆盖整个列表而非单个链接。
• position: relative 必不可少：为 设置相对定位，才能让其内部的 ::before 绝对定位以 为参考系。
• 避免 text-decoration: underline：它无法精确控制位置/动画，且与 transform 冲突；务必用伪元素替代。
• transform-origin 推荐设为 left center：比 bottom left 更稳定，尤其在字体行高变化时不易偏移。
• 动画性能优化：scaleX() 属于合成属性（Compositor），GPU 加速，比 width 动画更流畅；切勿用 width: 0 → 100% 替代。
• 移动端适配提醒：若需支持触摸设备，可额外添加 @media (hover: hover) 查询，或确保 :hover 在 iOS Safari 中有合理响应（通常需点击两次）。

✅ 进阶拓展（可选）

如需实现「仅悬停时显示」+「恢复时反向收缩」，无需额外代码——当前 transition 已双向生效。若想添加颜色变化或粗细过渡，可扩展：