超链接下划线两种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;}