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

本文详解如何使用纯 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 已双向生效。若想添加颜色变化或粗细过渡，可扩展：

nav a::before {   /* ... 其他属性 */   background-color: #333; } nav a:hover::before {   transform: scaleX(1);   background-color: #007bff; /* 悬停变色 */ }

这套方案轻量、语义清晰、无 js 依赖，完美适配现代浏览器（chrome/firefox/Safari/edge ≥ v90），是构建专业导航动效的推荐实践。