Use Pseudo Element to Create Background Overlay

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);
}