+4 votes
by
How do you make a hover so that when you hover over li appears border from left to right and disappears from right to left?

<div class="hs-menu-wrapper">
<ul>
<li><a>Меню 1</a></li>
<li><a>Меню 2</a></li>
<li><a>Меню 3</a></li>
</ul>
</div>

1 Answer

0 votes
by
 
Best answer
a {
position: relative;
height: 100%;
color: #eeedf2;
font-size: 16px;
font-weight: 400;
transition: .2s;
text-decoration: none;
cursor: pointer;
}
a:after {
content: '';
position: absolute;
bottom: -5px;
right: 0;
height: 2px;
width: 100%;
transform: scale(0, 1);
transition: transform 0.4s;
background: black;
transform-origin: right top;
}
a:hover:after {
transform: scale(1, 1);
transform-origin: left top;
}
...