React导航栏中CSS :before伪元素hover动画异常问题排查与修复

问题描述 #

在React项目中基于Bootstrap构建导航栏布局，尝试使用CSS :before伪元素为导航项实现hover下划线动画，但实际效果与预期不符。

相关代码 #

JSX代码 #

<div className="collapse navbar-collapse" id="navbarSupportedContent">
  <ul className="navbar-nav me-auto mb-2 mb-lg-0">
    <li className="nav-item">
      <a className="menu nav" aria-current="page" href="#">Home</a>
    </li>
    <li className="nav-item">
      <a className="menu nav" href="#">Products</a>
    </li>
  </ul>
</div>

CSS代码 #

#navbarSupportedContent {
  position    : relative;
  top         : 5.78px;
  margin-left : .4em;
}
.nav{
  font-family     : var(--font-1);
  font-size       : 1.2em;
  color           : var(--color-1);
  text-decoration : none;
}
#navbarSupportedContent ul li:not(:last-child) {
  margin-right : 1em;
}
.menu::before{
  content       : "";
  position      : absolute;
  bottom        : 0;
  left          : 0;
  width         : 0;
  height        : 4px;
  background    : var(--color-1);
  border-radius : 50px;
  transform     : translateY(-4px);
  transition    : width .5s ease;
}
.menu:hover::before {
  width : 100%;
}

效果对比 #

预期效果 #

实际效果 #

错误原因 #

1. 定位基准错误：.menu元素未设置position: relative，导致伪元素的绝对定位参考父级#navbarSupportedContent（该元素设置了position: relative），hover时下划线会拉伸至整个导航容器宽度，而非单个导航项宽度。
2. 位置偏移问题：伪元素的transform: translateY(-4px)和bottom: 0组合，导致下划线位置与文字的对齐不符合预期。

修复方案 #

修改CSS代码，为.menu添加相对定位，并调整伪元素的位置属性：

#navbarSupportedContent {
  position    : relative;
  top         : 5.78px;
  margin-left : .4em;
}
.nav{
  font-family     : var(--font-1);
  font-size       : 1.2em;
  color           : var(--color-1);
  text-decoration : none;
}
#navbarSupportedContent ul li:not(:last-child) {
  margin-right : 1em;
}
/* 添加相对定位，让伪元素以当前导航项为基准 */
.menu {
  position: relative;
  /* 可选：添加内边距让下划线与文字间距更合理 */
  padding-bottom: 4px;
}
.menu::before{
  content       : "";
  position      : absolute;
  bottom        : 0; /* 基于.menu的底部定位 */
  left          : 0;
  width         : 0;
  height        : 4px;
  background    : var(--color-1);
  border-radius : 50px;
  /* 移除多余的transform，改用padding调整间距 */
  transition    : width .5s ease;
}
.menu:hover::before {
  width : 100%;
}

修复说明 #

• 给.menu设置position: relative，确保伪元素的绝对定位以单个导航项为参考容器，hover时下划线仅覆盖当前导航项宽度。
• 通过给.menu添加padding-bottom替代transform，更直观地调整下划线与文字的间距，避免定位偏移问题。
• 保留原有的过渡动画逻辑，确保hover时宽度平滑变化。

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