导航按钮:after伪元素hover时高度不一致问题求助

问题描述 #

为导航栏每个按钮添加:after伪元素后，鼠标悬停时“Home”和“Projects”按钮下方的伪元素，视觉上与“About Me”“Skills”的高度不一致，复现代码如下：

原始CSS代码 #

.nav-button {
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 36px;
  width: 100%;
}

.nav-bar {
  list-style-type: none;
  padding-left: 5px;
}

.nav-button:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: relative;
  background: #E7AB79;
  transition: width 0.3s ease 0s, right 0.3s ease 0s;
  width: 0;
}

#home-button:hover:after {
  width: 68px;
  right: 0;
}

#aboutme-button:hover:after {
  width: 110px;
  left: 0;
}

#projects-button:hover:after {
  width: 90px;
  left: 0;
}

#skills-button:hover:after {
  width: 64px;
  left: 0;
}

.nav-button:hover {
  cursor: pointer;
}

原始HTML代码 #

<nav>
  <ul class="nav-bar">
    <li class="nav-button button" id="home-button">Home</li>
    <li class="nav-button button" id="aboutme-button">About Me</li>
    <li class="nav-button button" id="projects-button">Projects</li>
    <li class="nav-button button" id="skills-button">Skills</li>
  </ul>
</nav>

问题原因 #

1. 定位方式错误：伪元素使用position: relative，它会占据文档流空间，偏移基于自身初始位置而非父元素，容易受父元素布局影响出现垂直位置偏移。
2. 属性设置不一致：#home-button:hover:after额外设置了right: 0，结合relative定位会让该伪元素位置与其他按钮的伪元素产生差异，视觉上误以为高度不同（实际所有伪元素height都是2px，只是位置不对）。

解决方案 #

调整伪元素定位逻辑，让所有伪元素相对于父按钮统一对齐：

修改后的CSS代码 #

.nav-button {
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 36px;
  width: 100%;
  position: relative; /* 设置父元素为相对定位，作为伪元素的定位参考 */
}

.nav-bar {
  list-style-type: none;
  padding-left: 5px;
}

.nav-button:after {
  background: #E7AB79;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute; /* 改为绝对定位，相对于父元素对齐 */
  transition: width 0.3s ease; /* 简化过渡效果 */
  width: 0;
}

#home-button:hover:after {
  width: 68px;
  /* 移除right:0，保持与其他按钮逻辑一致 */
}

#aboutme-button:hover:after {
  width: 110px;
}

#projects-button:hover:after {
  width: 90px;
}

#skills-button:hover:after {
  width: 64px;
}

.nav-button:hover {
  cursor: pointer;
}

修改说明 #

• 给.nav-button添加position: relative，让伪元素可以基于父按钮的边界定位。
• 将伪元素的position: relative改为position: absolute，使其脱离文档流，固定在父按钮底部左侧，不受文档流影响。
• 移除#home-button:hover:after中的right: 0，统一所有按钮伪元素的hover逻辑，确保视觉效果一致。

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