css3小动画：鼠标hover后text-decoration的动画

实现效果

具体实现

利用css3 ::after或者::before伪元素实现。
html代码

<a class="abstract-title" href="/archer-demo/2013-12-26/images/">
      <span>webpack无法通过 IP 地址访问 localhost 解决方案</span>
 </a>

css代码

.abstract-title {
    line-height: 2.5rem;
    color: #787878;
    padding-bottom: 0.5rem;
    position: relative;
}

.abstract-title span::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #aaa;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.abstract-title span:hover::before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1)
}