如何修复hover时仅About元素显示锚点::before/::after水平线的问题？

问题根源 #

你给::before/::after伪元素设置了position: absolute，但<a>元素默认是position: static（无定位状态），导致伪元素会相对于页面根元素（body）定位。代码里的top:35%刚好命中About导航项的垂直位置，其他导航项的伪元素其实都存在，但全堆在同一个位置，所以看起来只有About生效。

修复方案 #

给<a>元素添加定位属性，让伪元素以它为参考基准，同时调整定位参数让线条正确出现在文字两侧：

修改后的CSS关键部分：

nav li a {
  font-family: 'Nunito', sans-serif;
  font-weight: 1000;
  font-size: 1.2rem;
  color: whitesmoke;
  letter-spacing: 2px;
  text-decoration: none;
  text-align: center;
  /* 添加相对定位，作为伪元素的定位基准 */
  position: relative;
}

nav li a::before {
  content: '';
  width: 35vw;
  height: 3px;
  background-color: whitesmoke;
  position: absolute;
  /* 垂直居中于文字 */
  top: 50%;
  transform: translateY(-50%);
  /* 定位到a元素左侧外部 */
  left: -35vw;
  opacity: 0;
}

nav li a::after {
  content: '';
  width: 35vw;
  height: 3px;
  background-color: whitesmoke;
  position: absolute;
  /* 垂直居中于文字 */
  top: 50%;
  transform: translateY(-50%);
  /* 定位到a元素右侧外部 */
  right: -35vw;
  opacity: 0;
}

改动说明 #

1. position: relative：强制<a>成为伪元素的绝对定位参考容器，确保每个导航项的伪元素只属于自身
2. top:50% + transform: translateY(-50%)：让水平线始终垂直居中于导航文字，不会因为文字大小变化错位
3. left: -35vw/right: -35vw：让线条从文字边缘向左右延伸35vw长度，正好出现在文字两侧

这样所有导航项悬停时，两侧的水平线都会正确显示了。

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