css下划线动画效果

CSS 下划线动画效果是一个很酷的效果，让你的页面变得更加生动有趣。下面我们来看一下怎么实现这个效果。

/* 定义下划线动画的样式 */
.underline {
    position:relative;
    display:inline-block;
}
 
.underline:after {
    content:""; 
    position:absolute; 
    left:0; 
    bottom:-2px;
    width:100%; 
    height:2px;
    background-color:#f00;
    transform:scaleX(0); 
    transform-origin:right;
    transition: transform 0.5s ease-in-out 0s;
}
 
.underline:hover:after {
    transform:scaleX(1); 
    transform-origin:left;
}

首先我们给需要添加下划线动画的文本添加一个类名为"underline"的样式。

然后我们使用:after伪元素添加一个下划线。这个伪元素的位置是绝对定位的，并且在父元素的底部。默认情况下下划线是不可见的（transform: scaleX(0);）。当:hover伪类存在时，下划线将从右侧到左侧逐渐放大（transform: scaleX(1);），从而显现出来。

最后我们还使用transition属性使得下划线的动画变得更加平滑自然。

<p class="underline">这是一段需要添加下划线动画的文本</p>

最后我们只需要在需要添加下划线动画的文本上添加类名"underline"即可。