如何实现导航链接的左到右下划线悬停动画-html教程

本文详解如何使用纯 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);
}

✅ 核心要点说明：