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 动画从中间悬停下划线
链接动画悬停上的下划线和箭头
如何从活动导航链接中删除悬停时不必要的附加下划线?