Background in ::before hides the content

Question

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>?

Just so you know your `> *` selector isn't doing anything right now. [Text](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text/13147311#13147311) and [pseudo elements](https://css-tricks.com/a-little-reminder-that-pseudo-elements-are-children-kinda/) both act like children but they can't be selected like this. — Bdeering, Sep 19 '21 at 15:57
@Bdeering - a useful point - and it's a good thing in this particular case since we need to set the z-index of the pseudo before element and don't want that setting to be inadvertently overwritten further down the cascade. — A Haworth, Sep 19 '21 at 16:00
@Bdeering Do you mean that the sass shortcut isn't working or that writing `.auth-form-frame > *` is meaningless? Could you please point me to a resource that explains this in detail? — AlwaysLearning, Sep 19 '21 at 16:21
@AlwaysLearning `.auth-form-frame > *` doesn't affect any of your computed styles *in this case*. The resources I linked earlier give a little more detail as to why the text and ::before pseudo element inside your div can't be selected like this. — Bdeering, Sep 19 '21 at 21:47

score 3 · Accepted Answer · answered Sep 19 '21 at 15:42

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.

Background in ::before hides the content

1 Answers1