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