导航栏下划线动画问题：hover时下划线覆盖整个ul而非单个链接

这个问题我太熟悉啦！核心原因是绝对定位的参考元素不对，咱们一步步来搞定：

问题分析 #

你给.nav a::before加了position: absolute，但<a>标签本身没有设置position: relative属性。CSS里绝对定位的元素会向上寻找最近的「有定位属性（relative/fixed/absolute/sticky）」的父元素作为参考容器，这里你的.nav ul刚好设置了position: fixed，所以伪元素的宽度会被拉满整个ul的宽度，而不是单个链接的宽度。

修复方案 #

只需要给.nav a添加position: relative，让伪元素的绝对定位以单个<a>标签为参考即可：

a { 
  text-decoration: none; 
  color: black; 
}
/* 重点添加这行：给a标签设置相对定位 */
.nav a {
  position: relative;
}
.nav a::before { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  height: 2px; 
  bottom: 0; 
  left: 0; 
  background-color: rgb(92, 149, 112); 
  visibility: hidden; 
  transform: scaleX(0); 
  transition: all 0.3s ease-in-out 0s; 
}
.nav a:hover::before { 
  visibility: visible; 
  transform: scaleX(1); 
}
ul.nav { 
  font-size: 11px; 
  list-style: none; 
  position: fixed; 
  display: block; 
  padding: 0; 
  margin: 0; 
  z-index: 100; 
  top: 0.5em; 
  right: 1.5em; 
}
.nav li { 
  display: inline-block; 
  margin: 7px 15px; 
}
.nav a:active::before { 
  visibility: visible; 
  transform: scaleX(1) 
}

对应的HTML部分保持不变：

<ul class="nav">
<li id="nav-home"><a id="a-home" href="#">Home</a></li>
<li id="nav-services"><a href="#">Services</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>

原理说明 #

当<a>标签设置了position: relative后，它就成了内部绝对定位元素的「包含块」，伪元素的width: 100%就会对应单个链接的宽度，hover时的scaleX(1)动画也就只会作用在当前选中的链接下划线啦。

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