本文详解如何使用纯 css 为导航链接添加精准、流畅的「左起伸展式」下划线悬停效果，通过伪元素 `::before` 配合 `transform: scalex()` 实现高性能动画，并规避常见定位与继承错误。
要实现类似 poosh.com 那样仅在导航链接（）上出现、悬停时从左向右平滑伸展的细线下划线效果，关键在于将动画载体从父容器（如 ）转移到每个 标签自身
，并正确设置定位上下文与变换原点。
以下是推荐的完整实现方案：
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* 推荐：使菜单项水平排列 */
}
nav a {
position: relative;
display: inline-block; /* 确保 ::before 可基于其宽高定位 */
text-decoration: none;
color: #000;
padding: 12px 16px; /* 可选：增加点击区域 */
}
/* 下划线伪元素（置于链接下方） */
nav a::before {
content: '';
position: absolute;
bottom: -2px; /* 精准贴合文字基线下方 */
left: 0;
width: 100%;
height: 1px;
background-color: #000;
transform: scaleX(0);
transform-origin: left center; /* 更稳妥的原点（兼容性优于 bottom left） */
transition: transform 0.3s ease-out;
}
nav a:hover::before {
transform: scaleX(1);
}✅ 核心要点说明：
- ✅ 使用 ::before（而非 ::after）避免与链接默认内容或其它伪元素冲突；
- ✅ position: relative 在 上建立定位上下文，使绝对定位的 ::before 相对于链接本身生效；
- ✅ display: inline-block 确保 具有明确的盒模型宽度，width: 100% 才能准确铺满；
- ✅ transform-origin: left center 比 bottom left 更稳定，尤其在字体行高变化时不易偏移；
- ❌ 移除对
- 添加伪元素的做法——它会导致整行统一动画，无法实现「单个链接独立下划线」。
? 注意事项：
- 若导航使用 flex 或 grid 布局，请确保
- 不干扰 的尺寸计算（建议 li { margin: 0; }）；
- 如需支持深色模式，可将 background-color 改为 currentColor，使其自动跟随文字颜色；
- 动画性能优异：transform 和 opacity 是仅触发合成器的属性，无重排（reflow）开销。
此方案简洁、语义清晰、浏览器兼容性好（支持 IE10+），且完全不依赖 JavaScript，是现代导航动效的最佳实践之一。
