Hello, I wanted to know how to use the transition
property to get the result you have on the nav-bar li site link .
Hello, I wanted to know how to use the transition
property to get the result you have on the nav-bar li site link .
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