<a href="#" class="textlink">詳しく見る</a>

@keyframes anim {
  0% {
    transform: translateX(0)
  }
  49% {
    transform: translateX(100%)
  }
  50% {
    transform: translateX(-100%)
  }
  100% {
    transform: translateX(0)
  }
}

.textlink {
  color: black;
  text-decoration: none;
  transition: all .3s ease;
  display: inline-block;
  padding-bottom: 1px;
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #000;
    bottom: 0;
  }
  &:hover {
    &::before {
      animation: anim 1s ease;
    }
  }
}