JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="ball">
  <li><a href="#">Сайт zornet.ru</a></li>
  <li><a href="#">Здесь запрос</a></li>
  <li><a href="#">Скрипты и коды</a></li>
  <li><a href="#">Шаблоны сайта</a></li>
  <li><a href="#">Скрипты ресурса</a></li>
</ol>

CSS

.ball {
list-style: none;
margin: 0;
}
.ball a {
width: 100%;
color: #808285;
text-decoration: none;
display: inline-block;
padding-left: 25px;
height: 44px;
line-height: 44px;
font-size: 20px;
position: relative;
transition: .3s linear;
}
.ball a:before {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background: #425273;
position: absolute;
left: -30px;
top: 7px;
}
.ball li {position: relative;}
.ball li:before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background: #EC351D;
position: absolute;
top: 12px;
left: -30px;
z-index: 2;
transition: .4s ease-in-out;
}
.ball li:hover:before {left: -20px;}