css - css过渡的反向

Question

当我将鼠标悬停在 anchor 标记上时 <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