本文详解如何使用纯
css
为导航菜单中的 `
` 标签添加从左到右展开的下划线悬停效果，包含完整
html
结构、可复用样式代码、关键原理说明及常见避坑提示。
要实现类似 poosh.com 那样简洁专业的导航下划线悬停动画（即鼠标移入时，一条细线从左向右平滑展开），核心在于
将伪元素::before 附加到 标签上
，而非父级容器（如 ul），并结合 transform: scaleX() 与 transition 实现高性能缩放动画。
以下是经过验证的完整实现方案：
✅ 正确的 HTML 结构
✅ 推荐的 CSS 样式（含注释）
⚠️ 关键要点与避坑指南
伪元素必须挂载在 上
：原问题中错误地将 ::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 已双向生效。若想添加颜色变化或粗细过渡，可扩展：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
这套方案轻量、语义清晰、无 JS 依赖，完美适配现代
浏览器
（Chrome/Firefox/Safari/Edge ≥ v90），是构建专业导航动效的推荐实践。
/* 确保导航容器不干扰定位 */
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);
}nav a::before {
/* ... 其他属性 */
background-color: #333;
}
nav a:hover::before {
transform: scaleX(1);
background-color: #007bff; /* 悬停变色 */
}