如何在菜单中添加下划线效果？

<ul class="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</ul>

.menu li {
  display: inline-block;
  position: relative;
}

.menu li::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000; /* 下划线颜色 */
  transform: scaleX(0); /* 初始时下划线不可见 */
  transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
}

.menu li:hover::after {
  transform: scaleX(1); /* 鼠标悬停时下划线显示 */
}

<ul class="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</ul>