html - Border-bottom from left to right -


i'm trying transition border-bottom left right. i'm not quite sure how go on doing it, , tried different things haven't come close figuring out.

as far got

.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: ease-in-out .2s; border-bottom: 10px solid #334960; }  .menu-text:hover { border-bottom: 10px solid #fff; } 

i appreciate get, in advance.

you can not animate border in manner. have use pseudo element after. animate width of element left right!

.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: ease-in-out .2s;     background: none repeat scroll 0 0 #ffffff;     content: "";     display: block;     height: 2px;     width: 0; } .menu-text:hover:after {     width: 100%; } 

Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -