Underlined text should have prolonged underline for its image on hover

Question

I'm trying to implement underlying on image on hover link and image.

Here is what try to achieve:

The issue is when I hover on element I see two lines but should be one on hover both link and image, also two underlines are visible during window resizing and are not stable. Maybe there is a better way to handle that?

Here is my code:

.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

I will do that this way ...

• only one line, so no rendering glitch
• based on the principle that the icon is of known size
• no needs to duplicate your link element <a href...
• no needs to use a div parent.

Less code is always more easier for understanding...

html {
  font-family     : Arial, Helvetica, sans-serif;
  font-size       : 14px;
  }
a.lnk-moving-underline {
  position        : relative;
  display         : inline-block;
  font-size       : 1.5rem;
  width           : fit-content;
  overflow        : hidden;
  padding-bottom  : .2em;
  text-decoration : none;
  color           : crimson;
  }
a.lnk-moving-underline svg {
  width  : 1em; 
  height : 1em;
  fill   : currentColor; 
  }
a.lnk-moving-underline::before {
  content    : '';
  position   : absolute;
  display    : block;
  width      : 100%;
  height     : .2em;
  bottom     : 0;
  left       : 0;
  background : currentColor;
  transform  : translateX( -1.2em ); /* for words spacing */
  transition : transform 0.3s ease;
  }
a.lnk-moving-underline:hover::before {
  transform  : translateX( 0 );
  }

.noDisplay { display: none; }

<a class="lnk-moving-underline" href="@Url..." >
  Download 1 
  <svg><use xlink:href="#dnld_icon"></svg>
</a>
<br><br>
<a class="lnk-moving-underline" href="@Url..." >
  Download 2
  <svg><use xlink:href="#dnld_icon"></svg>
</a>


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