【カレント表示】現在のページのみメニューのデザインを変更する方法

<ul class="header-nav">
   <li class="header-nav__item"><a href="/">HOME</a></li>
   <li class="header-nav__item"><a href="/about/">ABOUT</a></li>
   <li class="header-nav__item"><a href="/work/">WORK</a></li>
</ul>

// カレント表示
const links = jQuery(".header-nav__item > a");

links.each(function () {
    if (this.href === location.href) {
        jQuery(this).closest(".header-nav__item").addClass("current");
    }
});

// カレント表示
const links = document.querySelectorAll(".header-nav__item > a");

links.forEach(function (link) {
    if (link.href === location.href) {
        link.closest(".header-nav__item").classList.add("current");
    }
});

/* 通常時 */ 
.header-nav__item a {
  color: #333;
}

/* カレント表示 */
.header-nav__item.current a {
  color: blue;
}