Expand border-top from center on hover

Question

Я пытаюсь анимировать желтую полосу, подобную той, что находится на границе. (И я хочу, чтобы избавиться от границы дна я просто гнал его, например,

http://jsfiddle.net/9mfccz6w/1/

.navbar li{ 
    display: inline-block; 
    border-width:5px;  
    border-top-style:solid; 
    border-top-color: white; 
} 

.navbar li:hover, .navbar li:active{ 
    border-width:4px;  
    border-top-style:solid; 
    border-top-color: #e0b82b; 
     -webkit-transform: translateY(-2px); 
    -moz-transform: translateY(-2px); 
    -ms-transform: translateY(-2px); 
    -o-transform: translateY(-2px); 
    transform: translateY(-2px); 

Спасибо

Answer 1

Так же, как вы используете :after использовать :before, код должен быть:

.navbar li:before, .navbar li:after{ 
    display: block; 
    content: ''; 
    -webkit-transform: scaleX(0.0001); 
    -ms-transform: scaleX(0.0001); 
    transform: scaleX(0.0001); 
    -webkit-transition: -webkit-transform 250ms ease-in-out; 
    transition: transform 250ms ease-in-out; 
} 
.navbar li:before{ 
    border-top: solid 3px #e0b82b; 
} 
.navbar li:after{ 
    border-bottom: solid 3px #019fb6; 
} 
.navbar li:hover:before, .navbar li:hover:after{ 
    -webkit-transform: scaleX(1); 
    -ms-transform: scaleX(1); 
    transform: scaleX(1); 
} 

DEMO

Примечание: я также удаляю border-top-color: #e0b82b; по телефону .navbar li:hover, .navbar li:active. Возможно, вы хотите сделать еще несколько изменений;)