悬停下划线动画

当用户悬停在文本上时，创建一个带有动画效果的下划线。

• 使用 display: inline-block 使下划线跨越文本内容的宽度。
• 使用 ::after 伪元素，并设置 width: 100% 和 position: absolute 将其放置在内容下方。
• 使用 transform: scaleX(0) 初始隐藏伪元素。
• 使用 :hover 伪类选择器，在悬停时应用 transform: scaleX(1) 并显示伪元素。
• 使用 transform-origin: left 和适当的 transition 来动画化 transform。
• 移除 transform-origin 属性以使变换从元素的中心开始。

<p class="hover-underline-animation">悬停在这段文本上查看效果！</p>

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}