Не срабатывает hover и before

#about-me .center ul li > a.mnblog {
    position: relative;
    display: inline-block;
    text-decoration: underline;
    font-size: 18px;
    color: #3e4757;
}

#about-me .center ul li > a.mnblog::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #000;
    z-index: -1;
    content: '';
}

#about-me .center ul li > a.mnblog:hover::before {
    position: absolute;
    animation: bg-animation2 0.5s 1;
    animation-fill-mode: forwards;
}

@keyframes bg-animation2 {
    0% { width: 10%; }
    100% { width: 100%; }
} 

<section id="about-me">
   <div class="center">
      <h5 class="title">h1111111</h5>
      <p>Основатель проекта, специалист по продающим сайтам</p>
      <ul>
         <li>Более 9 </li>
         <li>Большой </li>
         <li>Делюсь опытом в <a href="https://vk.com/kuban_site" class="mnblog" target="_blank">личном блоге</a></li>
      </ul>
   </div>
</section>