如何实现导航项悬停时从左到右的平滑下划线动画

本文详解如何使用纯 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，是现代导航动效的最佳实践之一。