鼠标放到这里查看效果1

鼠标放到这里查看效果2

class代码为：shadow-link

<!-------------悬停显示下划线---------------->
<style>
.shadow-link {
  display: inline-block;
  position: relative;
  text-align: center;
}

.shadow-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 90%;
  height: 2px;
  background-color: #000;
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.shadow-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}
</style>
<!-------------悬停显示下划线---------------->