CSS 制作简易 hover 动画

<nav class="navigation__nav">
  <ul class="navigation__list">
    <li class="navigation__item">
      <a href="" class="navigation__link"> <span>01</span>Home</a>
    </li>
    <li class="navigation__item">
      <a href="" class="navigation__link"> <span>02</span>Content</a>
    </li>
    <li class="navigation__item">
      <a href="" class="navigation__link"> <span>03</span>Archive</a>
    </li>
    <li class="navigation__item">
      <a href="" class="navigation__link"> <span>04</span>About us</a>
    </li>
    <li class="navigation__item">
      <a href="" class="navigation__link"> <span>05</span>Contact</a>
    </li>
  </ul>
</nav>

.navigation__nav {
  width: 100%;
  height: 100vh;
  background-color: #55c57a;
}

.navigation__list {
  list-style: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navigation__item {
  margin: 1rem;
}

.navigation__link:link,
.navigation__link:visited {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  font-size: 2rem;
  padding: 0.8rem 1.6rem;
  background-image: linear-gradient(
    120deg,
    transparent 0,
    transparent 50%,
    #fff 50%
  );
  background-size: 220%;
  transition: all 0.4s;
}

.navigation__link:hover,
.navigation__link:active {
  background-position: 100%;
  color: #7ed56f;
  transform: translateX(1rem);
}

.navigation__link span {
  margin-right: 1rem;
}