ラインが途切れて走るアニメーション

  .button {
    display: grid;
    grid-template-columns: auto 100px;
    align-items: center;
    column-gap: 10px;
  }
  .line {
    display: grid;
    width: 100%;
    height: 1px;
    overflow: clip;
  }
  .line-inner {
    display: grid;
    grid-area: 1/1;
    background-color: #fff;
    transition: transform 0.5s linear;
  }
  .line-inner:first-child {
    transform: translate(0%, 0%) translate3d(0, 0, 0);
  }
  .line-inner:last-child {
    transform: translate(-100%, 0%) translate3d(0px, 0px, 0px);
    transition-delay: 0.2s;
  }
  .button:hover .line-inner:first-child {
    transform: translate(100%, 0%) translate3d(0, 0, 0);
  }
  .button:hover .line-inner:last-child {
    transform: translate(0%, 0%) translate3d(0, 0, 0);
  }