demo.txt

https://codepen.io/t-kanjariya/pen/myrPvXW

index.css

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  font-family: sans-serif;
  padding: 20px;
}

nav {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
}

/* links */

nav a {
  text-align: center;
  width: 100%;
  text-decoration: none;
  color: white;
  padding: 0.6rem 1.2rem;
}

/* default anchor (first link) */

nav a:first-child {
  anchor-name: --active;
}

/* hovered link becomes the anchor */

nav a:hover,
nav a:focus-visible {
  anchor-name: --active;
}

/* moving highlight */

nav::after {
  content: "";
  position: absolute;

  position-anchor: --active;

  left: anchor(left);
  right: anchor(right);
  top: anchor(top);
  bottom: anchor(bottom);

  background: linear-gradient(90deg, deeppink, hotpink);
  border-radius: 999px;

  transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    right 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    bottom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  z-index: -1;
}

index.html

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Articles</a>
  <a href="#">Contact</a>
</nav>