<a href="#" class="cle-ink">
  <span>Subscribe</span>
  <svg class="cle-ink-line" viewBox="0 0 120 8" preserveAspectRatio="none" aria-hidden="true">
    <path
      d="M2 5 Q 30 1 60 4 T 118 5"
      stroke="currentColor"
      stroke-width="2.5"
      fill="none"
      stroke-linecap="round"
    />
  </svg>
</a>

.cle-ink {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  color: #ffd479;
  font:
    600 16px/1.2 Georgia,
    "Times New Roman",
    serif;
  text-decoration: none;
}
.cle-ink-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  color: #ffd479;
  pointer-events: none;
}
.cle-ink-line path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-ink:hover .cle-ink-line path,
.cle-ink:focus-visible .cle-ink-line path {
  stroke-dashoffset: 0;
}