<html结构>
<nav>
<a href="#" class="top">Hover this link</a>
</nav>
<css样式-效果1>
nav{
text-align: center;
width: 200px;
height: 75px;
line-height: 75px;
background-color: #000;
}
.top{
position: relative;
text-decoration: none;
color: #fff;
font-size: 25px;
}
.top:before{
content: "";
position: absolute;
left: 0; /* 从左边开始 *／
bottom: -2px;
width: 0; /* 没有hover的时候定义width为0，这样可以实现宽度从0到100%的变化。*／
height: 1px;
background: #fff; /* 下划线的颜色 *／
-webkit-transition: all .3s; /* 用时 *／
transition: all .3s;
}
.top:hover:before{
width: 100%; /* 结束时下划线的宽度为100% *／
right: 0; /* 到右边结束，不写也没关系 *／
}
<css样式-效果2>
nav{
text-align: center;
width: 200px;
height: 75px;
line-height: 75px;
background-color: #000;
}
.top:before{
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%; /* 宽度为100% *／
height: 1px;
background: #fff; /* 下划线的颜色 *／
transform: scale(0); /* 这个实现的关键就是scale(0)到scale(1)的变化。*／
transition: all .3s;
}
.top:hover:before {
transform: scale(1);
/*放大为100%---scale transform的原点是中点，所以会从中间的位置开始动画。---动画有透明渐变的效果，和scale的表现形式有关。*/
}
