There is a rectangle:

<div class="i">Hi world!</div>

His styles are:

 .i{ height: 100px; width: 300px; text-align: center; font-size: 16px; background-color: #eee; color: #fff; position: relative; z-index: 1; }

And its overlay:

 .i::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; opacity: 0.5; }

It was expected that z-index: 1; override the overlay, and the text will be white, but in fact it does not.
Why, and how to cure?

    2 answers 2

    The pseudo-element is inside a block-rectangle, it will always be higher. The solution is to wrap the text in say <p> and ask it position:relative; and z-index above overlay

     .i{ height: 100px; width: 300px; text-align: center; font-size: 16px; background-color: #eee; color: #fff; position: relative; } .ip { position: relative; z-index: 2; } .i::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; opacity: 0.5; z-index: 1; } 
     <div class="i"><p>Hi world!</p></div>

    • Thank you very much! Exactly what you need. - Sasha Vdodovich

    The problem is that the parent cannot be on top of the child. :before - child element for div .

    • Thank you very much! - Sasha Vdodovich