带下划线的文本在悬停时其图像应具有较长的下划线

Question

我正在尝试在悬停链接和图像上实现图像底层。

以下是尝试实现的目标：

问题是当我将鼠标悬停在元素上时，我看到两条线，但在悬停链接和图像时应该是一条线，在窗口调整大小期间也可以看到两条下划线，并且不稳定。 也许有更好的方法来处理这个问题？

这是我的代码：

.lnk-underline {
    text-decoration: none; /* Remove default underline for text */
    position: relative;
    display: inline-block;
}

.lnk-underline::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1.5px;
    width: 100%;
    height: 2px;
    background: #D0191D;
}

.underline-hover {
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.underline-hover::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1.5px;
    width: 100%;
    height: 2px;
    background: #D0191D;
    transform: scaleX(0);
    transform-origin: bottom;
    transition: transform 0.3s ease-in-out;
}

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

/* Remove underline from lnk-underline for downloadLink on hover */
.lnk-underline:hover {
    text-decoration: none;
}

<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>

Answer 1

我会这样做...

• 只有一行，所以没有渲染故障
• 基于图标已知大小的原则

.noDisplay { display: none; }

.div-underline-hover {
  font-family    : Arial, Helvetica, sans-serif;
  font-size      : 20px;
  position       : relative;
  color          : crimson;
  width          : fit-content;
  overflow       : hidden;
  padding-bottom : .2em;
  }
.div-underline-hover svg {
  width  : 1em; 
  height : 1em;
  fill   : currentColor; 
  }
.div-underline-hover a {
  color            : inherit;
  text-decoration  : none;
  }
.div-underline-hover::before {
  content    : '';
  position   : absolute;
  display    : block;
  width      : 100%;
  height     : .2em;
  bottom     : 0;
  left       : 0;
  background : currentColor;
  transform  : translateX( -1.1em ); /* personal choice, just a little larger than the width of the svg */
  transition : transform 0.3s ease;
  }
.div-underline-hover:hover::before {
  transform  : translateX( 0 );
  }

<svg class="noDisplay">
    <symbol id="dnld_icon" viewBox="0 0 256 256" >
      <path d="M230.2,176.2v53.5c0,9-7.3,16.2-16.2,16.2H42c-9,0-16.2-7.2-16.2-16.2v-53.5c0-9,7.3-16.2,16.2-16.2
          c9,0,16.2,7.3,16.2,16.2v37.3h139.5v-37.3c0-9,7.3-16.2,16.2-16.2S230.2,167.3,230.2,176.2z M116.6,190.1
          c3.2,3.2,7.3,4.7,11.5,4.7c4.2,0,8.3-1.6,11.5-4.7l48.6-48.6c6.4-6.3,6.4-16.6,0-22.9c-6.3-6.3-16.6-6.3-22.9,0
          l-21,21V26.2c0-9-7.2-16.2-16.2-16.2c-9,0-16.2,7.3-16.2,16.2v113.3l-21-21c-6.3-6.3-16.6-6.3-22.9,0
          c-6.3,6.3-6.3,16.6,0,22.9L116.6,190.1z"/>
    </symbol>
  </svg>
  
  <br><br>
  
  <div class="div-underline-hover">
    <a href="@Url" >Download 1</a><a href="@Url">
      <svg><use xlink:href="#dnld_icon"></svg>
    </a>
  </div>
  
  <br><br>
  
  <div class="div-underline-hover">
    <a href="@Url" >Download 2</a><a href="@Url">
      <svg><use xlink:href="#dnld_icon"></svg>
    </a>
  </div>