通常在页面载入/鼠标移到文字上方时，要有下划线从无到有的动画效果，下面用hr标签和a标签举例说明：
html代码
<div class="pic-wrapper"> <p> <hr class="first-hr"> <br> <hr class="second-hr"> </p> <br> <a class="demo-a">aaaaaaaa</a> <br> <a class="demo-b">bbbbbbbb</a> </div>css代码
.pic-wrapper { width: 500px; height: 500px; margin: 0 auto; background: #ccc; } p { width: 100%; height: 100px; margin: 100px auto; text-align: center; } //method 1 .first-hr { max-width: 100px; height: 0; border: none; border-top: 2px solid #000; transition: all 2s; transform: rotateY(90deg); } .first-hr-show { transform: rotateY(0deg); } //method 2 .second-hr { width: 0; max-width: 100px; height: 0; border: none; border-top: 2px solid #000; transition: all 2s; } .second-hr-show { width: 100%; } //method 3 .demo-a,.demo-b { position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo-a:before { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: #3e83f7; transition: all 2s; transform: scale(0); } .demo-a:hover:before { transform: scale(1); } //method 4 .demo-b:before { content: ""; position: absolute; left: 50%; bottom: -2px; height: 2px; width: 0; background: #3e83f7; transition: all 2s; } .demo-b:hover:before { width: 100%; left: 0; right: 0; }方法1:通过transform的rotateY属性 方法2:通过改变宽度来实现 方法3:transform的scale属性 方法4:通过改变宽度来实现
主要区别:通过scale属性实现的下划线效果，有淡入淡出的效果，而其他三种在动画开始或结束，横线的颜色及透明度始终保持不变
