Как расположить псевдоэлемент под родителем, но над фоном первого родителя?

Question

[Dymok]

Нужно сделать блок , у которого под ним будет располагаться элемент с его же размерами, но более прозрачным.
Пытаюсь сделать с помощью псевдоэлемента, но не удаётся расположить его так, чтобы он был под родителем, но над фоном блока .container. Пытался ставить разные z-index, но никак. Как можно решить?
codepen

Comments

[Eugene Chefranov]

В вашем примере вроде всё норм или же я неправильно понял вопрос. Можете наглядно показать что хотите?

[Dymok]

Eugene Chefranov, в примере псевдоэлемент находится выше родителя, нужно, чтобы он был под ним

[Никита Егоров]

Dymok, из за цвета не видно, тоже сначала не понял пока не сделал желтым )

[Andrej Sharapov]

Dymok, поставьте у after

left: 0;
top:100%; /* заменил боттом -5*/

[Dymok]

Andrej Sharapov, совсем не то, мне нужно получить вот такое:

[Andrej Sharapov]

Dymok, да, вопрос не так понял)

[snap44]

Dymok, так не проще или я что-то не понял?

[Dymok]

snap44, совсем не подумал о тени. Спасибо.

Answer 1

[#FFFFFF]

как варант - обернуть текст в ещё один тег и задать ему:

.item-text {
  position: relative;
  z-index: 4;
}

По-другому, боюсь, никак.

Comments

[Dymok]

Получилось, спасибо.