疑似クラス - z-インデックスを持つ全幅背景要素？

Question

EDIT：親要素のZ-インデックスを削除すると、その要素が機能することがわかりました。とにかく...すべてのことを達成するための「ハッキリ」な方法はありませんか？それは動作しますが、本当に非常にハックを感じています。

私は、中央の50％の行の後ろに全幅擬似要素を作ろうとします。それが正常に動作します（コードは非常にハックに見えます、しかし）私は、zインデックス、親の後ろに擬似要素を取得することはできません。

> Visit codepen-battleground here.

これは、SCSSコードです：

html, body { 
    height: 100%; 
    margin: 0; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 

.content { 
    background-color: blue; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    width: 50%; 
    z-index: 1; 
    padding: 2em; 

    &:after { 
     content: ""; 
     display: block; 
     height: 100%; 
     left: -50vw; 
     opacity: .7; 
     position: absolute; 
     right: 0vw; 
     top: 0; 
     width: 200vw; 
     z-index: -1; 
     border: 10px solid green; 
     box-sizing: border-box; 
     background-color: tomato; 
    } 
} 

ですこれを行うにはトリックがありますか？私はこれを働かせたいです。

Answer 1

親のz-indexを削除すると機能します。

また、本体のオーバーフロースクロールを削除できるように、センタリングソリューションを変更しました。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.content { 
 
    background-color: blue; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width: 50%; 
 
    padding: 2em; 
 
} 
 
.content:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100vw; 
 
    transform: translateX(-50%); 
 
    z-index: -1; 
 
    opacity: .7; 
 
    box-sizing: border-box; 
 
    background-color: tomato; 
 
}

<div class="content"> 
 
    <strong>This should go to front so it's <em>blue</em> not lilac</strong> - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
</div>