Требуется сделать подложку элементу - слой, который выглядывает из под этого элемента на пару пикселей. В обычном порядке это div в div и внешнему пару пикселей padding`а.
Хочется сделать без дополнительной обертки, псевдоклассом li:
<ul>
<li>Hello z-index</li>
</ul>
Набросок. Псевдо-элемент пока скрыт.
- Пробуем. Псевдо-элемент перекрывает наш. Ну это ожидаемо.
- Пробуем загнать псевдо-элемент под li добавлением отрицательного z-index. Ожидаемая красная подложка улетела под весь список (можно видеть сквозь полупрозрачный фон списка).
- Пробуем увеличивать z-index у самого li, и все по новой.
Перестаю понимать, как работает z-index, и сомневаться, понимал ли вообще когда-нибудь :).
Подскажите, пожалуйста, в чем дело? Куда копать? Может какая особенность у псевдоэлементов есть упущеная? Может у кого статейка на уме есть на эту тему?
UPD: проблему, очевидно, можно решить проставив z-index родителям, но тем самым мы пораждаем код который весь пронизан z-index`ами. Получается сильная зависимость от контекста и т.д. В крупном проекте не хотелось бы с таким столкнуться :). Хочется найти способ элегантного добавления такой подложки, не выходя за рамки элемента.