实现链接与图片hover时统一下划线效果的问题求助

问题原因分析 #

你的代码存在两个独立的下划线生成逻辑：

• .lnk-underline::before 会持续显示一条下划线
• .underline-hover::before 在 hover 时显示另一条下划线
  两者叠加导致双下划线，窗口 resize 时的状态不稳定也是因为两个伪元素的渲染冲突。

修复方案 #

仅保留父容器的伪元素控制整个区域的连贯下划线，移除子元素单独的下划线样式，具体调整如下：

修改后的CSS代码

/* 重置链接默认样式，消除自带下划线干扰 */
a {
  text-decoration: none;
}

.lnk-underline {
  position: relative;
  display: inline-block;
}

.underline-hover {
  position: relative;
  display: inline-flex; /* 用flex让内部元素横向排列并对齐基线，保证下划线位置统一 */
  align-items: center; /* 对齐文本和图片的垂直位置 */
  gap: 8px; /* 可选：给文本和图标之间添加间距 */
}

.underline-hover::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.5px;
  width: 100%;
  height: 2px;
  background: #D0191D;
  transform: scaleX(0);
  transform-origin: left; /* 可选：调整动画起始方向，也可保留原transform-origin: bottom */
  transition: transform 0.3s ease-in-out;
}

.underline-hover:hover::before {
  transform: scaleX(1);
}

HTML代码（保持原结构即可）

<div class="underline-hover">
  <a href="@Url" class="lnk-underline" id="downloadLink">
    Download
  </a>
  <a href="@Url" id="iconDownload">
    <img src="/icons/download.svg" />
  </a>
</div>

关键调整说明 #

1. 移除.lnk-underline::before的所有样式，取消子链接单独生成下划线的逻辑
2. 将.underline-hover的display改为inline-flex，既保证内部元素横向排列，又能让文本与图片垂直对齐，确保下划线位置统一
3. 统一由.underline-hover::before控制唯一的下划线，hover 时通过scaleX(1)显示，默认状态隐藏，彻底避免双下划线问题
4. 全局重置<a>标签的默认下划线，消除浏览器自带样式的干扰

调整后，鼠标悬停在父容器区域（包含链接和图片）时会显示一条连贯的下划线，窗口 resize 时也不会出现状态不稳定的情况。

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