CSS过渡反转方向

Question

当我悬停在锚点标签上时，border-bottom从上到下出现，如何将其翻转，使border-bottom从下到上出现？

我的当前样式：

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

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

- mtkcs

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 进行工作

- Sid Verma