CSS hover时::after下划线仅作用于单个悬停图标解决方法

所有图标同时触发下划线是定位参考层级设置错误导致的：

• 仅父容器.controls设置了position: relative，单个.controls-icon图标未设置定位属性
• 所有::after伪元素的绝对定位会统一向上找到.controls作为参考系，所有下划线重叠在容器同一位置
• 任意图标触发hover时，对应伪元素显示，视觉上呈现所有图标同时出下划线的异常效果
• 附带问题：hover状态写的transform: scale(1)和初始态scaleX(0)不匹配，会产生多余的Y轴缩放动画

• 给.controls-icon添加position: relative，让每个伪元素以当前图标自身为定位参考
• 给.controls加弹性布局和间距属性，避免图标拥挤
• 修正hover态transform为scaleX(1)，和初始动画逻辑对齐
• 可选：给图标加cursor: pointer优化鼠标交互反馈

CSS 代码 #

.top-bar {
  display: flex;
  align-items: center;
  padding: 1.25rem 2rem;
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
}

.fa-bars {
  font-size: 2.5rem;
}

.logo {
  margin-left: 1rem;
}

.logo img {
  display: block;
  width: 10rem;
  height: 1.66rem;
  color: #000;
}


.controls {
  font-size: 2rem;
  margin-left: auto;
  margin-right: 3rem;
  display: flex;
  gap: 1.5rem; /* 控制图标间距 */
}

.controls-icon {
  position: relative;
  cursor: pointer;
}

.controls-icon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  height: 0.2rem;
  width: 100%;
  background-color: #000;
  transition: all 0.5s;
  transform: scaleX(0);
}


.controls-icon:hover::after {
  transform: scaleX(1);
}

HTML 代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div class="top-bar container">
  <div class="menu-btn"><i class="fa-solid fa-bars"></i></div>
  <div class="logo"><img src="assets/img/logo.svg" alt="logo" /></div>
  <div class="controls">
    <i class="fa-solid fa-magnifying-glass controls-icon"></i>
    <i class="fa-solid fa-play controls-icon"></i>
    <i class="fa-solid fa-user controls-icon"></i>
  </div>
</div>

修改后鼠标悬停任意图标时，仅当前图标对应的::after伪元素会以自身为基准定位并执行缩放动画，实现单图标单独触发下划线的预期效果。

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