Полноэкранный элемент с псевдо-классом - z-index?

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>