Как сделать чтобы background перекрывал псевдо-элемент?

Question

[olya_097]

Как сделать, чтобы background перекрывал псевдо-элемент?

.start__item:nth-child(1):after
.start__item:nth-child(4):after

https://jsfiddle.net/yam20un1/2/

Comments

[Сергей delphinpro]

никак, в общем случае.
псевдо - это потомок. он всегда будет выше родителя и его фона.
За исключением z-index:-1; Но тут свои нюансы

[olya_097]

Сергей delphinpro, Вы смотрели скрин снизу?
или так и поняли?

[Сергей delphinpro]

olya_097, не смотрел. ответ в общем по теме

[Сергей delphinpro]

olya_097, в вашем случае, возможно следует просто поднять z-index для второго элемента

[olya_097]

Сергей delphinpro, для какого второго?

[Сергей delphinpro]

.start_item
но, возможно, я не правильно понял вашу задумку.

[olya_097]

Сергей delphinpro, задумка такая

Answer 1

[Дмитрий Христоев]

сделать типа .start__item-wrapper и поставить фон у него, убрать у общего родителя

Comments

[olya_097]

Дмитрий Христоев , так у меня ж есть .start__box
он же вроде как отдельно идет

[Дмитрий Христоев]

тогда пойдем издалека. какой бэкграунд должен перекрывать что перекрывать? я понял, что белый у блоков.

[olya_097]

Дмитрий Христоев, у псевдо
тоесть у первого итема и четвертого
.start__item:nth-child(1):after
.start__item:nth-child(4):after

[olya_097]

Дмитрий Христоев, вот как тут

[Дмитрий Христоев]

так https://bennettfeely.com/clippy/

[olya_097]

Дмитрий Христоев, не совсем поняла к чему Вы это скинули
мне ж это не нужно(

[Дмитрий Христоев]

вам нужно сделать угол?

[olya_097]

Дмитрий Христоев, у первого и четвертого итема должна быть обрезка угла
вот как на скрине

[Дмитрий Христоев]

ну тогда опять смотрим на мою ссылку выше. И получаем https://jsfiddle.net/zLokxjb6/

[olya_097]

Дмитрий Христоев, о
это оно спасибо
Но тогда почему то пропадает одно из псевдо

[Дмитрий Христоев]

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

[olya_097]

Дмитрий Христоев, в текущей разметке куда добавить .start__item-wrapper?
не совсем поняла

[olya_097]

Дмитрий Христоев, вот у меня сейчас так
https://jsfiddle.net/z2Lhk87e/

[Дмитрий Христоев]

примерно так https://jsfiddle.net/5n2p8j3c/ я не вымерял ни чего, накидал на глаз, но смысл такой

[olya_097]

Дмитрий Христоев, спасибо огромное
а почему box-shadow заменили на filter: drop-shadow(0 0 10px black); ?

[Дмитрий Христоев]

потому что нужна тень со скошенными углами. при box-shadow будет просто квадрат, filter учитывает и детей.