<p class="cle-tilde-row">
  <a href="#" class="cle-tilde">Root</a>
  <a href="#" class="cle-tilde">Perfect Fifth</a>
  <a href="#" class="cle-tilde">Perfect Fourth</a>
  <a href="#" class="cle-tilde">Major Third</a>
</p>

.cle-tilde-row {
  margin: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.cle-tilde {
  position: relative;
  padding-bottom: 8px;
  color: #ffd479;
  font:
    500 15px/1.2 Georgia,
    "Times New Roman",
    serif;
  text-decoration: none;
  background-image: linear-gradient(#ffd479, #ffd479);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition:
    background-image 0.4s,
    background-size 0.4s;
}
.cle-tilde:hover,
.cle-tilde:focus-visible {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'><path d='M0 3 Q 15 0 30 3 T 60 3' stroke='%23ffd479' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-size: 100% 6px;
}