html导航栏鼠标划过下划线跟随特效，纯css代码

在HTML和CSS中创建一个简单的导航栏，当鼠标悬停在链接上时下划线跟随效果，你可以使用伪元素`:hover`配合`transition`属性来实现。下面是一个基本的示例：

HTML部分:

<nav>
  <ul class="nav-links">
    <li><a href="#" class="nav-item">首页</a></li>
    <li><a href="#" class="nav-item">关于我们</a></li>
    <li><a href="#" class="nav-item">联系我们</a></li>
  </ul>
</nav>

CSS部分:

.nav-links {
  list-style-type: none;
  padding: 0;
  display: flex;
}

.nav-item {
  text-decoration: none;
  color: black;
  transition: all 0.3s ease; /* 设置过渡效果持续时间和缓动函数 */
}

.nav-item:hover {
  text-decoration: underline; /* 鼠标悬停时添加下划线 */
}

在这个例子中，当鼠标移入 `.nav-item` 元素时，文本会从无装饰（默认样式）变为带有下划线，这个改变会在0.3秒内平滑完成（由 `transition` 属性决定）。