Анимация :: before :: after при наведении курсора на элементы списка - PullRequest
Новая
       15

Анимация :: before :: after при наведении курсора на элементы списка

0 голосов
/ 16 марта 2020

Я пытаюсь сделать, как мне показалось, простую анимацию при наведении, но я столкнулся с некоторыми проблемами. 

@keyframes slide{
  0% { opacity: 0; transform: translateX(100%); }
  100% { opacity: 1; transform: translateX(0); }
}
nav {
  padding: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  }
nav li{
  list-style: none;
  font-size: 3em;
}
.show {
  display: none;
}
nav li span:hover .show{
  color: blue;
  display: inline-block;
  animation: slide 300ms ease;
}
<nav>
  <li><span><span class="show">...</span>HOME</span></li>
  <li></li>
  <li></li>
</nav>

Я пытался использовать ::before { content: '...'; display: inline-block; animation: slide 300ms ease; } и то же самое с ::after, но это не работает.

Я обнаружил, что это работает с этим span, но это сбивает с толку, используя так много пролетов, и я где-то читал, что ::before ::after - лучшая практика. Как я могу сделать это, используя их и не разрушая макет?

Спасибо!

...