基于类设置导航下划线动画

<ul class="nav-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

.nav-menu {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.nav-menu li {
  position: relative;
}

.nav-menu li a {
  text-decoration: none;
  color: #000;
  transition: color 0.3s ease-in-out;
}

.nav-menu li a:hover {
  color: #ff0000;
}

.nav-menu li::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #ff0000;
  transition: width 0.3s ease-in-out;
}

.nav-menu li:hover::after,
.nav-menu li.active::after {
  width: 100%;
}

const navItems = document.querySelectorAll('.nav-menu li');
const underline = document.createElement('span');
underline.classList.add('underline');

navItems.forEach(item => {
  item.addEventListener('mouseenter', () => {
    const link = item.querySelector('a');
    const linkWidth = link.offsetWidth;
    const linkLeft = link.offsetLeft;

    underline.style.width = `${linkWidth}px`;
    underline.style.transform = `translateX(${linkLeft}px)`;
  });

  item.addEventListener('mouseleave', () => {
    underline.style.width = '0';
    underline.style.transform = 'translateX(0)';
  });
});

document.querySelector('.nav-menu').appendChild(underline);