Объясните что не так с псевдоэлементами after и как сделать правильно

Есть код
h2 { text-transform: uppercase; color: #fff; background: #F00; text-align: center; width: 120%; position: absolute; left: -5px; top: 59px; transform: rotate(35deg); } h2:after { background: #D10A0A; content: ''; position: absolute; transform: rotate(150deg); width: 20px; height: 40px; left: 90%; z-index: -1; }

Хит продаж

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

Ответ

Псевдоэлемент h2:after создаётся внутри элемента h2 и поэтому не может оказаться под ним.
Попробуйте добавить внутрь ещё один элемент, который будет перекрывать ваш h2:after. Например, так:
h2 { text-transform: uppercase; color: #fff; text-align: center; width: 120%; position: absolute; left: -5px; top: 59px; transform: rotate(35deg); } h2:after { background: #D10A0A; content: ''; position: absolute; transform: rotate(150deg); width: 20px; height: 40px; left: 90%; top: 0; z-index: -1; } h2 span { display: block; position: relative; background: #F00; }

Хит продаж

https://jsfiddle.net/L8cxwun5/