Как сделать чтобы псевдоэлемент ::before был под основным элементом?

Question

[kirillleogky]

Есть код:
https://jsfiddle.net/of0s3jdx/

Мне нужно получить такую кнопку:


z-index не помогает

Answer 1

[Арсений Матыцин]

z-index работает, просто применяешь ты его без понимания, как он работает. Тебе надо двигаться в этом ключе.

Comments

[kirillleogky]

Арсений Матыцин может я не правильно понял
z-index в данном случае не работает с псевдоэлементами
нужно ставить span к примеру внутрь элемента?

[Арсений Матыцин]

kirillleogky, нужно выстраивать отношение на уровне z-index внутри элемент (button в данном случае) между элементами и псеводэлементами. Span выступает нейтральным элементом, которому можно задать z-index внутри родителя (при этом оставив его relative, чтобы он не двигался никуда) выше уровнем, чем псевдоэлемент.

Псевдоэлементы конечно же можно и нужно регулировать с помощью z-index-а, они работают точно так же, как и другие элементы в этом ключе.

Answer 2

[Тарас Шульга]

Я может не шарю или хз, но не проще взять box-shadow? Как бы зачем марока с этим?
Если, чо я с тф, данная песочница под тф не сделана - сорь