CSSのaタグでtransformを無効にしたい

Question

下記、上のCSSで【aタグ】全体に下線をつけるようにしています。
下側のCSS【return-top】では、下線をつけないようにしたいです。

すべてのaタグにはクラスがついていません。

a{
color: #707070;
text-decoration: none;
position: relative;
}
a::after{
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #707070;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
a:hover::after {
  transform: scale(1, 1);
}

  <!-- return-top -->
  <div class="return-top">
    <a href="#fv">
      <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="currentColor" xmlns="https://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
    </a>
  </div>
  <!-- //return-top -->

.return-top {
  width:50px;
  height:25px;
  border-radius:25px 25px 0 0;
  background-color:#A5BDC6;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.return-top a{
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 1

下記のスタイル指定を追記すると下線が表示されなくなると思います。

.return-top a::after {
  display: none;
}