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

本文详解如何使用纯 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 更稳定，尤其在字体行高变化时不易偏移；
• ❌ 移除对
  添加伪元素的做法——它会导致整行统一动画，无法实现「单个链接独立下划线」。

? 注意事项：