版权声明：X北辰北 https://blog.csdn.net/qq_35117024/article/details/87855099
实现文字下划线从中间向两端延伸的动画效果，主要是通过css的transform和transition属性来实现，下面直接粘贴代码和效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.testStyle{
position:relative;
width: 8%; /*控制字体下划线的长度*/
}
.testStyle::after{
content:'';
display:block;
/*开始时候下划线的宽度为100%*/
width:100%;
height:3px;
position:absolute;
bottom:-10px;
background:#000;
transition:all 0.3s ease-in-out;
/*通过transform的缩放scale来让初始时x轴为0*/
transform: scale3d(0,1,1);
/*将坐标原点移到元素的中间，以原点为中心进行缩放*/
transform-origin:50% 0;
}
.testStyle:hover::after{
/*鼠标经过时还原到正常比例*/
transform:scale3d(1,1,1);
}
</style>
</head>
<body>
<div>
<h1 class="testStyle">测试文字</h1>
</div>
</body>
</html>