CODEWITHSUNDEEP
htmlcss
Andreas Eilertsen Lybo
Andreas Eilertsen Lybo

Reputation: 59

Border-bottom from left to right

I'm trying to transition border-bottom from left to right. I'm not quite sure how to go on doing it, and tried different things but haven't really come any close to figuring it out.

As far as now I 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: all ease-in-out .2s;
border-bottom: 10px solid #334960;
}

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

I appreciate any help I get, thanks in advance.

Upvotes: 1

Views: 17664

Answers (1)

Sumit
Sumit

Reputation: 1639

You can not animate border in this manner. You have to use pseudo element after. Animate the width of this element from left to 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: 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%;
}

Upvotes: 8

Related Questions