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