超链接下划线两种CSS3原生特效，酷酷的

一种是看到 vue.js 官网的效果，另一种是相反的模拟效果：

1. 效果见VUE官网，鼠标滑上去就看到了：

a{position: relative;}
      a:after{
         content: "";
         width: 0;
         height: 2px;
         background: red;
         position: absolute;
         top: 100%;
         left: 50%;
         transition: all .2s ease;
      }
      a:hover:after{
         left: 0%;
         width: 100%;
      }

2. 另一种是我自已写的，跟它相反，向两边划动，原理是一样的，效果见  我的小作品

a {
  position: relative;
}

a:before,a:after {
  content: '';
  border-bottom: solid 1px #fff;
  position: absolute;
  bottom: 0;
  width: 0;
}

a:before,a:after{ left: 0;right: 0; }

a:hover:before, a:hover:after { width: 50%;}

a:before, a:after {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}