Underline Slide Navbar

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<nav class="slide-nav">
  <a href="#" class="slide-nav__link is-active">Home</a>
  <a href="#" class="slide-nav__link">Features</a>
  <a href="#" class="slide-nav__link">Pricing</a>
  <a href="#" class="slide-nav__link">Contact</a>
</nav>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.slide-nav {
  display: inline-flex;
  gap: 28px;
  padding: 14px 6px;
  font-family: system-ui, sans-serif;
  border-bottom: 1px solid #24242c;
}
.slide-nav__link {
  position: relative;
  color: #9a9aa5;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 10px;
  transition: color 0.25s ease;
}
.slide-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-nav__link:hover,
.slide-nav__link.is-active {
  color: #f4f4f5;
}
.slide-nav__link:hover::after,
.slide-nav__link.is-active::after {
  transform: scaleX(1);
}