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