修改以下代码，使用js实现点击每项后有下划线跟随动画 <div id="box_classify"> <ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link active xuanze" href="#">推荐</a> </li> <li class="nav-item"> <a class="nav-link xuanze" href="#">家具<

可以使用CSS实现下划线跟随动画。首先需要给每个选项添加一个伪元素，作为下划线。然后使用CSS transition属性实现动画效果。

以下是修改后的代码：

HTML:

<div id="box_classify">
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link active xuanze" href="#">推荐</a>
    </li>
    <li class="nav-item">
      <a class="nav-link xuanze" href="#">家具</a>
    </li>
    <!-- 添加更多选项 -->
  </ul>
</div>

CSS:

.nav-link {
  position: relative; /* 设置相对定位，为下划线伪元素提供定位依据 */
}

.nav-link::after {
  content: ""; /* 添加伪元素 */
  position: absolute; /* 设置绝对定位 */
  left: 0; /* 伪元素的左侧与选项左侧对齐 */
  bottom: -2px; /* 伪元素的底部与选项底部对齐，并向下偏移2像素，这个值可以根据需要调整 */
  width: 0; /* 初始宽度为0 */
  height: 2px; /* 下划线高度为2像素，这个值可以根据需要调整 */
  background-color: black; /* 下划线颜色为黑色，可以根据需求修改 */
  transition: width 0.3s ease; /* 使用transition属性实现宽度变化的动画效果，时长为0.3秒，缓动函数为ease，可以根据需要调整 */
}

.nav-link:hover::after {
  width: 100%; /* 鼠标悬停时将伪元素宽度设置为100%，即显示完整的下划线 */
}

解释一下CSS部分的代码：

首先给所有选项的链接元素.nav-link添加相对定位的position属性，为下划线伪元素提供定位依据。

然后使用::after伪元素添加一个下划线。设置绝对定位，左侧与选项左侧对齐，底部与选项底部对齐，并向下偏移2像素，高度为2像素，背景颜色为黑色。

使用transition属性设置伪元素的宽度变化动画效果，时长为0.3秒，缓动函数为ease。

最后使用:hover伪类选择器，当鼠标悬停在选项上时，将伪元素宽度设置为100%，即显示完整的下划线。这个过程使用transition属性实现动画效果。