如何实现类似poosh.com的导航栏CSS下划线悬停动画？

你的代码存在几个核心问题导致效果失效，以下是具体修正方案：

问题分析 #

1. 伪元素绑定目标错误：你给nav ul添加了::after伪元素，但hover触发的是nav a，两者无关联，无法触发动画。
2. 定位方式错误：伪元素使用position: relative会占据文档流空间，导致下划线位置偏移且布局混乱。
3. 选择器逻辑断裂：hover事件绑定在a标签上，但伪元素属于ul，触发逻辑不匹配。

修正后的代码 #

HTML结构（确保导航基础结构正确）

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">分类</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

CSS代码

/* 重置ul默认样式，优化导航布局 */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem; /* 自定义导航项之间的间距 */
}

/* 设置a标签为相对定位，作为伪元素的定位容器 */
nav ul li a {
  position: relative;
  color: #000000;
  text-decoration: none;
  padding-bottom: 8px; /* 控制下划线与文字的距离 */
}

/* 下划线伪元素 */
nav ul li a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s ease-out;
}

/* hover时触发下划线展开动画 */
nav ul li a:hover::after {
  transform: scaleX(1);
}

关键修改说明 #

• 将伪元素绑定到nav ul li a上，让hover事件与伪元素属于同一目标，确保触发逻辑通顺。
• 给a标签设置position: relative，让绝对定位的伪元素以a为基准定位，避免偏移。
• 伪元素改用position: absolute，不占用文档流空间，精准贴合文字底部。
• 通过padding-bottom控制下划线与文字的距离，比直接设置伪元素bottom值更灵活。

内容的提问来源于stack exchange，提问作者designbear