本文详解如何使用纯 css 为导航菜单中的 `` 标签添加从左到右展开的下划线悬停效果，包含完整 html 结构、可复用样式代码、关键原理说明及常见避坑提示。
要实现类似 poosh.com 那样简洁专业的导航下划线悬停动画（即鼠标移入时，一条细线从左向右平滑展开），核心在于将伪元素 ::before 附加到 <a> 标签上，而非父级容器（如 ul），并结合 transform: scaleX() 与 transition 实现高性能缩放动画。
以下是经过验证的完整实现方案：
✅ 正确的 HTML 结构
<nav>
<ul>
<li><a href="https://www.php.cn/link/53a9f8cd4872ab6ef7e09a25b1bdb1e8">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>✅ 推荐的 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);
}⚠️ 关键要点与避坑指南
- 伪元素必须挂载在 <a> 上：原问题中错误地将 ::after 添加在 ul 上，导致下划线覆盖整个列表而非单个链接。
- position: relative 必不可少：为 <a> 设置相对定位，才能让其内部的 ::before 绝对定位以 <a> 为参考系。
- 避免 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），是构建专业导航动效的推荐实践。
