本文详解如何使用纯 css 为导航菜单中的链接添加平滑的左向右伸展式下划线 hover 动画，无需 javascript，兼容现代浏览器，且仅作用于 `` 标签，不影响其他元素。
要实现类似 poosh.com 那样简洁专业的导航下划线悬停效果（即鼠标移入时，一条细线从左端平滑延伸至文字全长），关键在于将伪元素 ::before 或 ::after 绑定到 标签而非父容器（如 ul），并配合 transform: scaleX() 与 transition 实现高性能动画。
以下是推荐的完整实现方案：
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex; /* 更现代的布局方式，替代 inline-block */
}
nav a {
position: relative;
display: block;
padding: 12px 20px;
text-decoration: none;
color: #000;
font-weight: 500;
}
/* 下划线伪元素（置于链接下方） */
nav a::before {
content: '';
position: absolute;
bottom: -2px; /* 精准贴合文字基线下方 */
left: 0;
width: 100%;
height: 1px;
background-color: #000;
transform: scaleX(0);
transform-origin: left center; /* 推荐使用 left center，更直观可控 */
transition: transform 0.3s ease-out;
}
nav a:hover::before {
transform: scaleX(1);
}
✅ 核心要点说明：
- ✅ 使用 ::before 而非 ::after（语义更清晰，避免与可能存在的内容伪元素冲突）；
- ✅ 必须为 设置 position: relative，才能让绝对定位的伪元素相对于链接自身定位；
- ✅ transform-origin: left center 比 bottom left 更可靠——因 height: 1px 无“底部”概念，center 可确保缩放锚点垂直居中于线条；
- ✅ bottom: -2px 是经验值，可根据字体大小微调（如 font-size: 16px 时 -2px 通常合适）；
- ✅ 移除 ul::after 的尝试，因其会为整个列表生成单一下划线，无法实现「每个链接独立动画」。
? 进阶优化建议：
- 若需「仅在 hover 时显示、默认隐藏」，可添加 opacity: 0 + opacity: 1 过渡，增强视觉反馈；
- 支持深色模式？可将 background-color 替换为 currentColor，自动继承文字颜色；
- 响应式适配？在媒体查询中调整 transition-duration 或 bottom 值即可。
? 总结： 此方案轻量、可维护、性能优异（基于 CSS transform，触发 GPU 加速），且完全符合语义化 HTML 结构。只需三步：① 为链接设相对定位；② 用 ::before 创建线条；③ 用 scaleX() 控制伸缩动画——即可优雅复刻专业站点的交互细节。
