Result

下線がグラデーションになっているかのようにする
疑似要素をグラデーションにして1pxだけすき間を空け、下線がグラデーションになってるかのように見せます

css

a {/*はみ出した部分はoverflow: hidden;で非表示にする*/
 color:#111;
  display: inline-block;
  overflow: hidden;
  position: relative;
  font-size:2rem;
  text-decoration: none;
  vertical-align: bottom;
}
a:after {/*すき間をあける*/
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 1px no-repeat;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 400%;
  will-change: transform;
  z-index: -1;
}
a:hover:after {/*マウスホバーでグラデーション*/
  background-image: linear-gradient(90deg, rgba(122, 95, 255, 0.8) 15%, rgba(1, 255, 137, 0.6) 35%, rgba(122, 95, 255, 0.8) 85%);
}

html

<a href="#">hogehoge piyopiyo</a>

via

Underline gradient animation