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)
}