How to display underline animation on button image hover?

[harukajmickey]

Hi here is the button I coded.

https://k41qdbx52ltq4oeh-57309069474.shopifypreview.com

When the mouse is hovered on the text, the underline animation shows, but not the button image.

How do you show the underline animation when the mouse is hovered on the image?

Thank you in adavance!

          <div class="flex justify-center mt-10 md:mt-16">
                <a class="read-more_btn text-lg md:text-xl hover:opacity-70" href="/blogs/news"><span class="underline">もっと読む</span></a>
            </div>

<style>
.read-more_btn:after {
  content: "";
  display: inline-block;
  width: 56px;
  height: 56px;
  background-image: url('{{ ' arrow-btn.svg' | file_url }}');
  background-size: contain;
  vertical-align: middle;
  margin-left: 16px;
}

.underline {
  padding-bottom: 5px;
  position: relative;
}

.underline::before {
  background: #333;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}

.underline:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.underline.active:hover {
  border-bottom-color: transparent;
  /* Activeなページに対してhover時に下線を無効にする */
}
</style>

 

[Dan-From-Ryviu]

Please try to change those code 

.underline {
  padding-bottom: 5px;
  position: relative;
}

.underline::before {
  background: #333;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}

.underline:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.underline.active:hover {
  border-bottom-color: transparent;
  /* Activeなページに対してhover時に下線を無効にする */
}

To this 

.read-more_btn {
  padding-bottom: 5px;
  position: relative;
}

.read-more_btn::before {
  background: #333;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}

.read-more_btn:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.underline.active:hover {
  border-bottom-color: transparent;
  /* Activeなページに対してhover時に下線を無効にする */
}

[harukajmickey]

@Dan-From-Ryviu 

Thank you.

When I typed the code, the button looks like this.

I don't want the underline underneath the button image, only the text. 

https://www.awesomescreenshot.com/video/21857173?key=d47726ff96b9d5793987ac75701103ba