Background in ::before hides the content

Issue

Consider:

<div class="auth-form-frame">
  Some very long text
</div>

If I give a background color to .auth-form-frame::before, the text becomes invisible:

.auth-form-frame {
    position: relative;
    width: 50rem;
    height: 25rem;
    color: #000;
    font-size: 10rem;
  
    &:before {
        content: ""; 
        background-size: cover;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-color: green; // This creates the problem
    }

    > * {
        z-index: 100;
    }
}

The full example appears in jsbin.

Why does this happen? How can I make the content visible despite the background color of the pseudo-element of <div>?

Solution

You need to set the z-index of the before pseudo-element:

&:before {
    content: ""; 
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: green; // This creates the problem
    z-index: -1; /* ADD THIS */
}

> * {
    z-index: 100;
}

}

While the pseudo element is sort of content of its 'owning' element you can position the owner and before and after pseudo elements relative to each other z-indexwise.

Answered By - A Haworth