css 悬停下划线动画

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 悬停下划线动画相关的知识,希望对你有一定的参考价值。

<p class="hover-underline-animation">Hover this text to see the effect!</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;
}

以上是关于css 悬停下划线动画的主要内容,如果未能解决你的问题,请参考以下文章

悬停在下拉菜单上时保持主导航项悬停 CSS

从中心开始的下划线动画的 CSS 代码更改

链接悬停动画下划线

scss 动画从中间悬停下划线

链接动画悬停上的下划线和箭头

如何从活动导航链接中删除悬停时不必要的附加下划线?