column's background using pseduo element - html

Question

Is it possible to add the similar background ( using pseudo element or whatever ) to the left element instead of right? Couldnt achive this using pseudo elements because they constantly appear at the start of containing element so I only could achieve this effect for the right column .
* {
box-sizing: border-box;
margin: 0;
}
.wrapper {
padding: 20px 0;
position: relative;
overflow: hidden;
}
.container {
padding: 0 15px;
max-width: 1170px;
margin-right: auto;
margin-left: auto;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.col-left,
.col-right {
padding: 0 15px;
flex-grow: 1;
text-align: center;
height: 500px;
}
.col-left {
width: 70%;
}
.col-right {
width: 30%;
}
.col-right::after {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 0;
height: 100%;
width: 50%;
margin-left: -15px;
background-color: lightgray;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-left"><h1>Left</h1></div>
<div class="col-right"><h1>Right</h1></div>
</div>
</div>
</div>

Answer 1

You can make the pseudo element relative to their column and use a big width to have overflow:
* {
box-sizing: border-box;
margin: 0;
}
.wrapper {
padding: 20px 0;
position: relative;
overflow: hidden;
}
.container {
padding: 0 15px;
max-width: 1170px;
margin-right: auto;
margin-left: auto;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.col-left,
.col-right {
padding: 0 15px;
flex-grow: 1;
text-align: center;
height: 500px;
position:relative;
}
.col-left {
width: 70%;
}
.col-right {
width: 30%;
}
.col-right::after {
content: '';
position: absolute;
z-index: -1;
left: 0;
top:-20px;
bottom:0;
width: 100vw;
background-color: lightgray;
}
.col-left::after {
content: '';
position: absolute;
z-index: -1;
top: -20px;
right:0;
bottom:0;
width: 100vw;
background-color: green;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-left"><h1>Left</h1></div>
<div class="col-right"><h1>Right</h1></div>
</div>
</div>
</div>

Answer 2

Explanation:
Currently the columns width is related to wrapper as wrapper has the style definition position:relative. We want the width of the columns to be related to the div with class "row". So if you give position:relative to .row then "col-left" as well as "col-right" will have width as you expected.
What to do:
To get the expected result add the line position:relative to row class definition.
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
position:relative;
}
Now to get the effect for left hand side add the code as below
.col-left::before {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 0;
height: 100%;
width: 70%;
margin-left: -15px;
background-color: lightgray;
}