CSS - стилизация обьектов before. after

Question

господа! Столкнулся с такой проблемой: объект before накладывается поверх самого элемента, z-index в данном случае не работает. Подскажите, что делаю не так?

.learning__list {
    padding-top: 65px;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    max-width: 650px;
    margin: 0 auto;
  }
.learning__list-item {
    position: relative;
    padding: 45px 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 300px;
    height: 310px;
    background-color: rgba(51, 62, 81, 0.7);
    backdrop-filter: blur(30.5px);
    border-radius: 20px;
    z-index: 10;
    &::after {
      position: absolute;
      content: '';
      width: 260px;
      height: 30px;
      left: 20px;
      bottom: -20px;
      background-color: rgba(51, 62, 81, 0.6);
      backdrop-filter: blur(27.5px);
      border-radius: 20px;
      z-index: 1;
    }
  }

 <ul class="learning__list">
    <li class="learning__list-item"></li>
    <li class="learning__list-item"></li>
    <li class="learning__list-item"></li>
    <li class="learning__list-item"></li>
 </ul>

Answer 1

Не нужен никакой z-index, z-index взаимодействует только с элементами находящимися на одном уровне вложенности, Вы задали "background-color: rgba(51, 62, 81, 0.7)" с 70% прозрачностью и он просвечивает. Поэтому и видно ":after", также background: родителя не является внутренним элементом, а значит не может быть выше ":after", так как ":after" дочерний элемент и имеет приоритет видимости над родителем. Смог это поправить только при помощи "z-index: -1;"

.learning__list {
    padding-top: 65px;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    max-width: 650px;
    margin: 0 auto;
  }
.learning__list-item {
  position: relative;
  padding: 45px 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 300px;
  height: 100px;
  background-color: rgba(51, 62, 81, 1);
  border-radius: 20px;
}
.learning__list-item::after {
  position: absolute;
  content: '';
  width: 260px;
  height: 30px;
  left: 20px;
  bottom: -20px;
  background-color: rgba(51, 62, 81, 0.7);
  border-radius: 20px;
  z-index: -1;
}

<ul class="learning__list">
    <li class="learning__list-item"></li>
    <li class="learning__list-item"></li>
    <li class="learning__list-item"></li>
    <li class="learning__list-item"></li>
 </ul>

БЛОГ НА HUSL

CSS - стилизация обьектов before. after

Ответы (1 шт):