Почему псевдоэлементы after и before не отрабатывают на родительском контейнере со свойством overflow:hidden

Доброго времени суток всем. Есть самописная слайдер-карусель, ничего замудреного просто пролистывание слайдов по шевронам предыдущий/следующий. Дак вот для внешнего контейнера этой карусели с overflow:hidden применяю after и before, но они почему-то скрываются за контейнером, хотя по всем мануалам css должны быть видимыми. Помогите разобраться, я все таки бэкендер, с фронтом дело имел последний раз 3 года назад. Заранее благодарю всех откликнувшихся!!!

Идея была в том чтобы задействовать after и before - они будут видны, а сами шевроны с функционалом подсунить над ними они все равно не видны, просто z-index им задать и всё, но что-то не работает предпоследний шаг!!! (((

Структура HTML:

.carousel-container {
  width: 59.5%;
  overflow: hidden;
  position: relative;
}

.carousel {
  display: flex;
  transition: transform 0.3s ease;
}

.carousel-slide {
  flex: 0 0 100%;
}

.carousel-container::after,
.carousel-container::before {
  position: absolute;
  display: block;
  top: 43%;
  height: 30px;
  width: 30px;
  color: #476da9;
  background: #ccc;
}

.carousel-container::after {
  content: '>';
  right: -15px;
}

.carousel-container::before {
  content: '<';
  left: -15px;
}

<div class="carousel-container">
  <div class="carousel">
    <div class="carousel-slide"></div>
    ......
  </div>
  <div class="prev"></div>
  <div class="next"></div>
</div>