Как работает позиционирование при одновременном использовании: hover, hover:after, hover:before?

https://codepen.io/SynteticCat/pen/ErbKWb?editors=0100 - Придумываю hover effects для кнопок.
Однако для кнопки с классом effect-1 возникла проблема.

Исходный код для позиционирования:
HTML

<div class="box">
    <div class="item effect-1">CSS</div>
</div>

CSS

.box {
  position: relative;
  z-index: 1;
}

.item {
  position: absolute;
  z-index: 1;
}

.item.effect-1:after,
.item.effect-1:before {
  content: "";
  position: absolute;
  z-index: -1;

Мне хотелось бы сделать так, чтобы появлялся задний слайдер, который выполнен на CSS и кнопка при наведении на нее перемещалась в правую сторону этого слайдера.
Вы поймете, что я имею ввиду, когда зайдете на страницу с исходным кодом - https://codepen.io/SynteticCat/pen/ErbKWb?editors=1100.

1 проблема:
Двигаются и псевдоэлементы и кнопка при срабатывании hover!
Поэтому мне приходится отдельно задавать hover: after и hover: before, чтобы они оставались на своих местах.

2 проблема:
Псевдоэлементы перекрывают фон кнопки [сам текст не перекрывается - что для меня тоже загадка]