특정 구간에서 밑줄 두두등장

HTML

<section id="portfolio">
      <div class="overflow--line">
        <h2><span>포트폴리오</span></h2>
        <div class="detail__btn--underline">
          <a href="#">전체 보기</a>
        </div>
      </div>
</section>

CSS

#portfolio .detail__btn--underline::after{
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background-color: var(--color--black);
  position: absolute;
  bottom: 0;
}
#portfolio .detail__btn--underline.visible::after{
  animation: underline 0.6s 0.1s forwards cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes underline {
  from{
    content: "";
    width: 0%;
  }
  to{
    content: "";
    width: 100%;
  }
}

JS

document.addEventListener("scroll", () => {
    const windowScrolly = window.scrollY;
    const detailUnderLine = document.querySelector("#portfolio .detail__btn--underline");
    if (windowScrolly > "3213" && windowScrolly < "3313") {
        detailUnderLine.classList.add("visible");
    }
});