Как применить свойство к псевдоэлементу?

Question

[valgerofficial]

Доброго времени суток! Имеется блок. Я добавил к нему псевдоэлемент, и поместил его на задний план. К Блоку я применил свойство "backdrop-filter: blur(10px);" Но псевдоэлемент встал на передний план. Подскажите как мне реализовать подобный эффект размытия?

Answer 1

[Владимир Римидалв]

Я немного поигрался, выглядит так, что лучше создать полноценный блок в качестве фоновой подложки, а не использовать псевдоэлемент. Достойного обоснования у меня нет)

<div class="block">Lorem ipsum...</div>
<div class="block-before"></div>

.block {
    background: rgba(0,0,0, 0.5);
    width: 500px;
    height: 500px;
    display: block;
    margin: 50px;
    position: relative;
    backdrop-filter: blur(10px);
}
  
 .block-before {
    content:""; 
    background: yellow;
    width: 500px;
    height: 200px;
    display: block;
    margin: 50px;
    position: absolute;
    top: 10px;
    right: 0;
    left: 10px;
    bottom: 0;
    z-index: -1;
}

Comments

[Ankhena]

Достойное обоснование кроется в спеке работы z-index

Answer 2

[serega danet]

если Десигнер LVL100 хочет :before, то зачем ему советовать разные стили.
Я тоже полазил по кодупену. И тоже вижу ,что не все так гладко с этим :before.
Что он помещает ниже и перед, похоже к background это не относится.
:before работает верно -- верхний цвет появляется ПОД текстом. Это правильно. Но НАД background текста.
Потому что определен после .
вывод -- blur помещайте в :before, который по DOM после. Порядком background в :before управляет только z-index: -1 ;

2. Проблема в backdrop -- я такого префикса не встречал. Это что-то из прошлого века.

3. Вообще странная ситуация. Наличие этого filter: blur(4px); именно в основном стиле ломает всю картину. И цвет из :before лезет вверх.
Будет этот filter: blur(4px) в :before или нет -- уже не важно. Цвет в :before будет внизу всего стиля, там где и должен.
filter: в основном стиле при наличии :before -- противопоказан.

4. И еще запрещено присваивать z-index основному классу . Что вообще не понятно.
У кого какие версии ?

https://codepen.io/oblominsk/pen/xxeeNBZ