User-1045082127 posted
hi there . I was wrote a way to simulate a simple effect in our menu and my code is:
<div id="first">
<ul>
<li><h5>a</h5></li>
<li><h5>b</h5></li>
</ul>
</div>
so my question is how can i remove left: -400%; from #first ul li::before part and chose a better way instead of it:
body{
padding:0;
margin: 0;
}
#first {
;
border:1px solid gray;
text-align: center;
height: 100px;
}
#first ul {
;
left: 40%;
}
#first ul li{
;
display: inline-block;
margin-right: 70px;
}
#first ul li::before{
content: '';
;
height: 100%;
left: -400%;
width: 60px;
border-radius: 100%;
background-color: red;
z-index: -1;
transform: scale(0);
transition: all 0.3s;
}
#first ul li:hover::before{
transform: scale(1);
}
tnx and regards