Список с анимированным маркером на CSS

Ну и еще один список в коллекцию.
На сей раз  - маркированный. Создан он на основе тега для нумерованных списков. Но это не принципиально. 

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка

При наведении на элемент списка, маленький красный кружок внутри большого двигается вправо.

Итак, это сам код списка. Абсолютно обычный:

<ol class="ball">   
   <li><a href="#">Элемент списка</a></li>
   <li><a href="#">Элемент списка</a></li>
   <li><a href="#">Элемент списка</a></li>   
   <li><a href="#">Элемент списка</a></li>   
   <li><a href="#">Элемент списка</a></li> 
</ol>

А это набор стилей для списка:

.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;}