css3 a标签用伪类写下划线动画效果

before在a标签之前的横线动画

从左往右动画效果

html代码：

<ul>
<li><a href="">哈哈</a></li>
<li><a href="">嘿嘿</a></li>
<li><a href="">啊啊</a></li>
<li><a href="">下划线</a></li>
</ul>

css样式：

ul>li>a:before{
position: absolute;
z-index: 1;
left: 0px;
bottom: 0px;
display: inline-block;
height: 3px;
width: 100%;
background-color: #ed6d00;
content: "";
transform: scale3d(0, 1, 1);
transform-origin: left;
transition: all 0.5s;
}
ul>li:hover>a:before{
transform: scale3d(1, 1, 1);
color: #ed6d00;
}

从中间两边扩散动画效果

html代码：

<ul>
<li><a href="">哈哈</a></li>
<li><a href="">嘿嘿</a></li>
<li><a href="">啊啊</a></li>
<li><a href="">下划线</a></li>
</ul>

css样式：

ul>li>a:before{
position: absolute;
z-index: 1;
left: 0px;
bottom: 0px;
display: inline-block;
height: 3px;
width: 100%;
background-color: #ed6d00;
content: "";
transform: scale3d(0, 1, 1);
transform-origin: center;
transition: all 0.5s;
}
ul>li:hover>a:before{
transform: scale3d(1, 1, 1);
color: #ed6d00;
}

从右往左动画效果

html代码：

<ul>
<li><a href="">哈哈</a></li>
<li><a href="">嘿嘿</a></li>
<li><a href="">啊啊</a></li>
<li><a href="">下划线</a></li>
</ul>

css样式：

ul>li>a:before{
position: absolute;
z-index: 1;
left: 0px;
bottom: 0px;
display: inline-block;
height: 3px;
width: 100%;
background-color: #ed6d00;
content: "";
transform: scale3d(0, 1, 1);
transform-origin: right;
transition: all 0.5s;
}
ul>li:hover>a:before{
transform: scale3d(1, 1, 1);
color: #ed6d00;
}

需要改变动画方向参数

transform-origin: right;//center left  right 三种动画方向

transform: scale3d(0, 1, 1);//第一个参数 表示长度的百分比  第二个参数 高度的百分比

这个动画效果 一般都是用在导航或者列表