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

a {
 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%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.