Псевдоэлементы (::before и ::after) всегда находятся ниже основного контента элемента и не могут быть размещены ниже других элементов, используя свойство z-index.
Это происходит из-за того, что у псевдоэлементов нет своего собственного пространства в структуре DOM. Они создаются непосредственно внутри выбранного элемента и являются его частью. Поэтому любые свойства, примененные к основному элементу, такие как z-index, также применяются к псевдоэлементам.
Однако, если вам требуется управлять относительным порядком или стеком позиционирования псевдоэлемента, вы можете использовать другие свойства, такие как position и transform, чтобы добиться нужного результата.
В вашем примере кода на CodePen, вы можете добиться желаемого эффекта с помощью следующих стилей:
.text {
position: relative;
z-index: 2;
/* другие стили */
}
.text::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100px;
background-color: red;
transform: translateZ(1px); /* Добавьте эту строку */
/* другие стили */
}
Также обратите внимание, что для эффективного использования z-index должна быть задана позиция (например, relative, absolute или fixed) для элементов, с которыми вы хотите управлять порядком слоев. В вашем примере вы уже задали позицию relative для .text, поэтому применение z-index будет работать.
