Как сделать псевдоэлемент за основным?

Question

Как сделать псевдоэлемент за основным?

Андрей Мастер (1971), на голосовании 4 года назад

У меня на странице есть блок. Я добавляю к нему псевдоэлемент :after с абсолютным позиционированием в углу основного. Но он появляется над основном, а мне нужно сделать его как-бы под ним, чтобы он был частично перекрыт основным.

Пробовал задать z-index у обоих элементов - это не даёт результата.

Answer 1

kjkszpj Знаток (288) 4 года назад

Усё работает... что-то криво написано в коде (которого нет в вопросе).
_________

.test {
position: relative;
margin: 20px;
width: 100px;
height: 100px;
background: orange;
}

.test::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: red;
top: -5px;
left: -5px;
z-index: -1;
}

.test::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: red;
right: -5px;
bottom: -5px;
z-index: -1;
}

<div class="test"></div>

АндрейМастер (1971) 4 года назад

Спасибо, ваш пример работает на отдельной странице. Но в моём шаблоне при задании отрицательного z-index элемент скрывается где-то под сеткой Бутстрапа.

kjkszpj Знаток (288) Значит он не прозрачный... но и не обязательно указывать именно "-1"... Можно основному блоку дать z-index: 1000; а вторичным по 999, должен работать... Это при условии, что сам блок не находится внутри соседей с большим индексом, которые в любом случае будут перекрывать всё.

АндрейМастер (1971) 4 года назад

Попробовал, не работает. Он вообще на индексы не реагирует никак.