Transition no hover

0

Hello, I wanted to know how to use the transition property to get the result you have on the nav-bar li site link .

    
asked by anonymous 15.07.2016 / 00:25

1 answer

2

This transition is done over the border-bottom thickness.

Basically the two states are:

li {
    transition: border-bottom .2s linear;
    border-bottom: 0px solid red;
}

li:hover {
    border-bottom: 5px solid red;
}

A minimalist example would look like this:

li {
    transition: border-bottom .2s linear;
    border-bottom: 0px solid red;
    padding: 10px;
    display: inline;
}

li:hover {
    border-bottom: 5px solid red;
}
<ul>
    <li>Um</li>
    <li>Dois</li>
    <li>Três</li>
</ul>

jsFiddle: link

    
15.07.2016 / 00:30