There is a code

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; } 
 <h2 class="action">Хит продаж</h2>

I do not understand why the pseudo-element for any value of z-index obtained on layers higher than the element itself. It turns out such nonsense as in the photo:

screenshot

  • 1. And how would you like? 2. The question heading is about before, and in the code about after, why? - Vadim Ovchinnikov
  • @VadimOvchinnikov corrected the question - Sergalas

2 answers 2

The h2:after pseudo-element is created inside the h2 element and therefore cannot be under it.

Try adding another element inside that will overlap your h2:after . For example:

 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; } 
 <h2><span>Хит продаж</span></h2>

https://jsfiddle.net/L8cxwun5/

    Z-index and transform

     h2 { text-transform: uppercase; color: #fff; background: #F00; text-align: center; width: 50%; position: absolute; left: -5px; top: 59px; transform: rotate(35deg); transform-style: preserve-3d; -ms-transform: none; -ms-transform-style: none; } h2:after { background: #D10A0A; content: ''; position: absolute; transform: rotate(150deg) translateZ(-20px); -ms-transform: rotate(150deg) translateZ(-20px); width: 20px; height: 40px; left: 90%; z-index: -1; } 
     <h2 class="action">Хит продаж</h2>