CSS3链接下划线左右延伸动画效果

转自轻轻简记
http://www.qingqingjianji.com/

业务场景：

最近，我们看到越来越多的网页里面，当鼠标放到标题，菜单或者其它链接上的时候，会出现一个左右延伸的线条动画效果。你有没有好奇它是怎么实现的呢，来让我们一起来揭开她的面纱。

具体实现：

原理：利用transform里面的scale方法配合伪元素显示隐藏实现

实例：

.main-content .article-title {

  position: relative;

}

.main-content .article-title a::before {

  position: absolute;

  left: 0;

  bottom: -3px;

  content: '';

  width: 100%;

  height: 2px;

  background: #ff8400;

  visibility: hidden;

  transform:scale(0);

  -ms-transform:scale(0);  /* IE 9 */

  -moz-transform:scale(0);  /* Firefox */

  -webkit-transform:scale(0); /* Safari 和 Chrome */

  -o-transform:scale(0);  /* Opera */

  transition: all .4s;

  -webkit-transition: all .4s;

  -ms-transition: all .4s;

  -o-transition: all .4s;

}

.main-content .article-title:hover a::before {

  visibility: visible;

  transform: scale(1);

  -webkit-transform: scale(1)

}