css - Expand border-top from center on hover -

i'm trying animate yellow bar 1 on border-bottom. (and want rid of border bottom putted example

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); 

thank you

just using :after use :before, code should be:

.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

note: remove border-top-color: #e0b82b; on .navbar li:hover, .navbar li:active. maybe want make few more changes ;)