Link 04

<a href="#" class="link-underline-hover"
  ><span class="link-underline-hover__text">テキストリンク</span></a
>

<a href="#" class="link-underline-hover"
  ><span class="link-underline-hover__text"
    >テキストリンクテキストリンク<br />テキストリンク</span
  ></a
>

/* reset */
:where(a).link-underline-hover {
  font: inherit;
  text-decoration: none;
}

/* snippet */
.link-underline-hover {
  --link-color: #2b36f5;
  --link-color-hover: #1f28a8;
  --link-underline-height: 1px;
  --link-underline-offset: 0.15em;
  --link-focus-color: #2b36f5;
  --link-focus-radius: 4px;
  --link-duration: 0.3s;
  --link-easing: ease;

  display: inline-block;
  line-height: 1.6;
  color: var(--link-color);
  border-radius: var(--link-focus-radius);
}

.link-underline-hover .link-underline-hover__text {
  display: inline;
  padding-bottom: var(--link-underline-offset);
  background-image: linear-gradient(currentcolor, currentcolor);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 var(--link-underline-height);
  transition: background-size var(--link-duration) var(--link-easing);
  box-decoration-break: slice;
}

@media (hover: none) {
  .link-underline-hover .link-underline-hover__text {
    background-size: 100% var(--link-underline-height);
  }
}

@media (hover: hover) and (pointer: fine) {
  .link-underline-hover {
    transition: color var(--link-duration) var(--link-easing);
  }

  .link-underline-hover:hover {
    color: var(--link-color-hover);
  }

  .link-underline-hover:hover .link-underline-hover__text {
    background-size: 100% var(--link-underline-height);
  }
}

.link-underline-hover:focus:not(:focus-visible) {
  outline: none;
}

.link-underline-hover:focus-visible {
  outline: 2px solid var(--link-focus-color);
  outline-offset: 2px;
}

.link-underline-hover:focus-visible .link-underline-hover__text {
  background-size: 100% var(--link-underline-height);
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) {
    .link-underline-hover {
      transition: none;
    }

    .link-underline-hover .link-underline-hover__text {
      transition: none;
    }
  }
}

<a href="#" class="link-underline-hover-slide"
  ><span class="link-underline-hover-slide__text">テキストリンク</span></a
>
<a href="#" class="link-underline-hover-slide"
  ><span class="link-underline-hover-slide__text"
    >テキストリンクテキストリンク<br />テキストリンク</span
  ></a
>

/* reset */
:where(a).link-underline-hover-slide {
  font: inherit;
  text-decoration: none;
}

/* snippet */
.link-underline-hover-slide {
  --link-color: #2b36f5;
  --link-color-hover: #1f28a8;
  --link-underline-height: 1px;
  --link-underline-offset: 0.15em;
  --link-focus-color: #2b36f5;
  --link-focus-radius: 4px;
  --link-duration: 0.3s;
  --link-easing: ease;

  display: inline-block;
  line-height: 1.6;
  color: var(--link-color);
  border-radius: var(--link-focus-radius);
}

.link-underline-hover-slide .link-underline-hover-slide__text {
  display: inline;
  padding-bottom: var(--link-underline-offset);
  background-image: linear-gradient(currentcolor, currentcolor);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 var(--link-underline-height);
  transition: background-size var(--link-duration) var(--link-easing);
  box-decoration-break: slice;
}

@media (hover: none) {
  .link-underline-hover-slide .link-underline-hover-slide__text {
    background-position: bottom left;
    background-size: 100% var(--link-underline-height);
  }
}

@media (hover: hover) and (pointer: fine) {
  .link-underline-hover-slide {
    transition: color var(--link-duration) var(--link-easing);
  }

  .link-underline-hover-slide:hover {
    color: var(--link-color-hover);
  }

  .link-underline-hover-slide:hover .link-underline-hover-slide__text {
    background-position: bottom left;
    background-size: 100% var(--link-underline-height);
  }
}

.link-underline-hover-slide:focus:not(:focus-visible) {
  outline: none;
}

.link-underline-hover-slide:focus-visible {
  outline: 2px solid var(--link-focus-color);
  outline-offset: 2px;
}

.link-underline-hover-slide:focus-visible .link-underline-hover-slide__text {
  background-position: bottom left;
  background-size: 100% var(--link-underline-height);
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) {
    .link-underline-hover-slide {
      transition: none;
    }

    .link-underline-hover-slide .link-underline-hover-slide__text {
      transition: none;
    }
  }
}

<a href="#" class="link-underline-always-hover-slide"
  ><span class="link-underline-always-hover-slide__text"
    >テキストリンク</span
  ></a
>
<a href="#" class="link-underline-always-hover-slide"
  ><span class="link-underline-always-hover-slide__text"
    >テキストリンクテキストリンク<br />テキストリンク</span
  ></a
>

/* reset */
:where(a).link-underline-always-hover-slide {
  font: inherit;
  text-decoration: none;
}

/* snippet */
.link-underline-always-hover-slide {
  --link-color: #2b36f5;
  --link-color-hover: #1f28a8;
  --link-underline-height: 1px;
  --link-underline-offset: 0.15em;
  --link-focus-color: #2b36f5;
  --link-focus-radius: 4px;
  --link-duration: 0.3s;
  --link-easing: ease;

  display: inline-block;
  line-height: 1.6;
  color: var(--link-color);
  border-radius: var(--link-focus-radius);
}

.link-underline-always-hover-slide .link-underline-always-hover-slide__text {
  display: inline;
  padding-bottom: var(--link-underline-offset);
  background-image: linear-gradient(currentcolor, currentcolor);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% var(--link-underline-height);
  transition: background-size var(--link-duration) var(--link-easing);
  box-decoration-break: slice;
}

@media (hover: hover) and (pointer: fine) {
  .link-underline-always-hover-slide {
    transition: color var(--link-duration) var(--link-easing);
  }

  .link-underline-always-hover-slide:hover {
    color: var(--link-color-hover);
  }

  .link-underline-always-hover-slide:hover
    .link-underline-always-hover-slide__text {
    background-position: bottom right;
    background-size: 0 var(--link-underline-height);
  }
}

.link-underline-always-hover-slide:focus:not(:focus-visible) {
  outline: none;
}

.link-underline-always-hover-slide:focus-visible {
  outline: 2px solid var(--link-focus-color);
  outline-offset: 2px;
}

.link-underline-always-hover-slide:focus-visible
  .link-underline-always-hover-slide__text {
  background-position: bottom left;
  background-size: 100% var(--link-underline-height);
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) {
    .link-underline-always-hover-slide {
      transition: none;
    }

    .link-underline-always-hover-slide
      .link-underline-always-hover-slide__text {
      transition: none;
    }
  }
}

<a href="#" class="link-text-hover-slide js-link-text-hover-slide"
  ><span class="link-text-hover-slide__inner"
    ><span class="link-text-hover-slide__text">テキストリンク</span></span
  ></a
>
<a href="#" class="link-text-hover-slide js-link-text-hover-slide"
  ><span class="link-text-hover-slide__inner"
    ><span class="link-text-hover-slide__text"
      >テキストリンクテキストリンク<br />テキストリンク</span
    ></span
  ></a
>

/* reset */
:where(a).link-text-hover-slide {
  font: inherit;
  text-decoration: none;
}

/* snippet */
.link-text-hover-slide {
  --link-color: #2b36f5;
  --link-color-hover: #1f28a8;
  --link-focus-color: #2b36f5;
  --link-focus-radius: 4px;
  --link-duration: 0.3s;
  --link-easing: ease;

  display: inline-block;
  line-height: 1.6;
  color: var(--link-color);
  border-radius: var(--link-focus-radius);
}

.link-text-hover-slide__inner {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
}

.link-text-hover-slide__text {
  grid-row: 1;
  grid-column: 1;
}

.link-text-hover-slide--enhanced .link-text-hover-slide__text:last-child {
  transform: translateY(100%);
}

@media (hover: hover) and (pointer: fine) {
  .link-text-hover-slide {
    transition: color var(--link-duration) var(--link-easing);
  }

  .link-text-hover-slide__text {
    transition: transform var(--link-duration) var(--link-easing);
  }

  .link-text-hover-slide:hover {
    color: var(--link-color-hover);
  }

  .link-text-hover-slide--enhanced:hover
    .link-text-hover-slide__text:first-child {
    transform: translateY(-100%);
  }

  .link-text-hover-slide--enhanced:hover
    .link-text-hover-slide__text:last-child {
    transform: translateY(0);
  }
}

.link-text-hover-slide:focus:not(:focus-visible) {
  outline: none;
}

.link-text-hover-slide:focus-visible {
  outline: 2px solid var(--link-focus-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) {
    .link-text-hover-slide {
      transition: none;
    }

    .link-text-hover-slide__text {
      transition: none;
    }

    .link-text-hover-slide--enhanced:hover
      .link-text-hover-slide__text:first-child {
      transform: none;
    }

    .link-text-hover-slide--enhanced:hover
      .link-text-hover-slide__text:last-child {
      transform: translateY(100%);
    }
  }
}

(function () {
  function initLinkTextHoverSlide(link) {
    if (link.dataset.linkTextHoverSlideInit === "true") return;
    link.dataset.linkTextHoverSlideInit = "true";

    const inner = link.querySelector(".link-text-hover-slide__inner");
    const text = inner?.querySelector(".link-text-hover-slide__text");
    if (!inner || !text) return;

    const clone = text.cloneNode(true);
    clone.setAttribute("aria-hidden", "true");
    inner.appendChild(clone);

    link.classList.add("link-text-hover-slide--enhanced");
  }

  function initAll() {
    document
      .querySelectorAll(".js-link-text-hover-slide")
      .forEach(initLinkTextHoverSlide);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initAll);
  } else {
    initAll();
  }
})();