我如何保持动画链接下划线效果，但使整个区域可点击(没有onclick或额外的div)

<a href="#" class="underline-animation">你的文本内容</a>

.underline-animation {
  text-decoration: none; /* 移除默认的下划线效果 */
  position: relative;
  display: inline-block;
}

.underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #000; /* 下划线的颜色 */
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out; /* 动画效果的过渡时间和缓动函数 */
}

.underline-animation:hover::after {
  visibility: visible;
  transform: scaleX(1);
}