how can i replace current positioned element from this way to better way

Question

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