從左到右的邊框底部

Question

我試圖從左到右過渡邊框底部。我不太清楚如何繼續這樣做，並嘗試了不同的東西，但並沒有真正接近找出它。

至於現在，我得到

.menu-text { 
font-size: 1em; 
height: 120px; 
margin-top: -10px; 
background: #334960; 
padding-right: 35px; 
color: #FFF; 
text-decoration: none; 
line-height: 125px; 
display: inline-block; 
cursor: pointer; 
transition: all ease-in-out .2s; 
border-bottom: 10px solid #334960; 
} 

.menu-text:hover { 
border-bottom: 10px solid #FFF; 
} 

我感謝所有幫助我得到的，在此先感謝。

Answer 1

您不能以這種方式爲邊界設置動畫。你必須使用僞元素after。從左到右動畫這個元素的寬度！

.menu-text { 
    font-size: 1em; 
    height: 120px; 
    margin-top: -10px; 
    background: #334960; 
    padding-right: 35px; 
    color: #FFF; 
    text-decoration: none; 
    line-height: 125px; 
    display: inline-block; 
    cursor: pointer; 
} 
.menu-text:after { 
    transition: all ease-in-out .2s; 
    background: none repeat scroll 0 0 #ffffff; 
    content: ""; 
    display: block; 
    height: 2px; 
    width: 0; 
} 
.menu-text:hover:after { 
    width: 100%; 
}