Hover下划线效果占用整行空间，需调整为仅覆盖文本范围

嘿，这个问题我之前也碰到过！核心原因是你给span加的伪元素没有正确的定位参照——span默认是行内元素，绝对定位的伪元素会往上找第一个有相对/绝对定位的父元素，如果找不到，就会以整个视口或者父级块元素（比如你的p标签）为基准，所以宽度才会撑满整行。

只需要加一行CSS就能搞定，看修改后的代码：

修改后的CSS代码 #

.underline-effect span {
  position: relative; /* 关键：让伪元素以span为定位基准 */
}

.underline-effect span:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px; /* 调整下划线和文本的间距，比margin-top更精准 */
  height: 2px;
  width: 100%;
  border-bottom: 2px solid;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
}

.underline-effect span:hover:after{
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

HTML代码（保持不变） #

<p class="underline-effect">
  <span>Home</span>
</p>

为什么这样改？ #

• 给span加上position: relative后，伪元素的width: 100%就会参照span的内容宽度计算，而不是p标签的整行宽度
• 把margin-top:10px换成bottom: -2px，可以让下划线的位置更贴合文本底部，不会因为字体大小变化出现偏移
• 调整height为2px，和border-bottom的宽度对应，避免多余的空白高度

这样修改后，hover的时候下划线就只会精准覆盖你span里的文本内容啦～

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