Use Pseudo Element to Create Background Overlay

Question

My goal is to have a div with any background, which then uses a pseudo element to create a transparent white overlay, thus \"lightening\" the background of the div. The \"o

Answer 1

If the pseudo element has a z-index, then you would need to position the .content element and add a z-index value to establish a stacking context.

Updated Example

.content {
    background-color: blue;
    width: 250px;
    position: relative;
    z-index: 1;
}

..you could also remove the z-index from the pseudo element and then merely position the .content element. In doing so, none of the elements need a z-index. The reason this works is because the :before pseudo element is essentially a previous sibling element. Thus, the succeeding .content element is positioned on top.

Alternative Example

.content {
    background-color: blue;
    width: 250px;
    position: relative;
}
.container::before {
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, .8);
}