css过渡的反向

Question

当我将鼠标悬停在锚标记<a>上时，border-bottom从上到下显示，如何撤消border-bottom从下到上显示？

我目前的风格：

a {
    display: inline-block;
    transition: border .5s ease-in-out;
}

a:hover {
    border-bottom: 4px solid ;
}

Answer 1

底部填充宽度减小，而边框增加则可以完成工作。

a {
    padding-bottom:4px;
    display: inline-block;
}
a:hover {
    padding-bottom:0;
    border-bottom: 4px solid;
    transition: border .5s ease-in-out, padding .5s ease-in-out;
}

工作JSFiddle