需要一个导航栏下划线跟随效果，要求点击后跟随

您可以使用CSS实现一个导航栏下划线跟随效果。以下是一个简单的实现方式：

1. 在导航栏中添加一个下划线元素，设置为隐藏状态。

2. 使用JavaScript监听导航栏中的点击事件，并根据点击的元素来动态调整下划线的位置和宽度。

下面是一个示例代码：

HTML：

<nav>
  <a href="#" class="active">首页</a>
  <a href="#">新闻</a>
  <a href="#">产品</a>
  <a href="#">关于我们</a>
  <div class="underline"></div>
</nav>

CSS：

nav {
  position: relative;
}
nav a {
  display: inline-block;
  padding: 10px;
  margin-right: 20px;
}
nav .underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background-color: #000;
  transition: all 0.3s ease;
}

JavaScript：

const navLinks = document.querySelectorAll('nav a');
const underline = document.querySelector('nav .underline');

navLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    navLinks.forEach(link => link.classList.remove('active'));
    link.classList.add('active');
    underline.style.width = `${link.offsetWidth}px`;
    underline.style.left = `${link.offsetLeft}px`;
  });
});

这样，点击导航栏中的链接时，下划线就会跟随到相应的位置。