CSS SNIPPET

  返回

悬停下划线动画  动画效果

为文本创建鼠标悬停时的下划线动画。

Credit: https://flatuicolors.com/

HTML
<p class="hover-underline-animation">Hover this text to see the effect!</p>
CSS
.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;
}
效果演示

Hover this text to see the effect!

代码说明
  1. display: inline-block 将块元素p 设置为 inline-block ,避免下划线超出父元素边界。
  2. 在元素上声明position: relative的目的是为伪元素建立笛卡尔定位上下文。
  3. ::after 定义了一个伪元素。
  4. position: absolute 将伪元素抽出文档流,并相对其父元素进行定位。
  5. width: 100% 确保伪元素横跨文本块的整个宽度。
  6. transform: scaleX(0) 设置伪元素的初始比例为0,这样就没有宽度,不可视。
  7. bottom: 0left: 0 将元素定位到块的左下角。
  8. transition: transform 0.25s ease-out 表示transform的变化将用0.25秒过渡,采用 ease-out 时间函数。
  9. transform-origin: bottom right 表示变换的锚点位于块的右下角。
  10. :hover::after 然后使用scaleX(1)将宽度过渡到100%,然后将transform-origin 修改为bottom left 实现锚点的反转,使元素可以在悬停结束后从反方向过渡结束。
浏览器支持

100.0%