Content background to ignore parent container but text to maintain positioning - html

Question

So I have a CSS issue that I can't seem to get my head around. I have solved this in a number of ways none of which seem to pass WCAG Axe accessibility tests as it mentions overlapping of elements.
I have some text whose position is correct, but I want the background-color of the text to span the whole width of the page without altering the position of the text.
Here's a simple example of the issue I want to solve.
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
width: 100%;
background: green;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>
My solution involved an extra absolute div with the background set, but that didn't pass accessibility. Any pointers would be great, I appreciate I'm probably being silly here.

Answer 1

You can add the following settings to .content: position: relative; and left: -50%; to move its left side to the left border, and a left and right padding of 50% to make it wider/full width of its parent and keep the text contents aligned with the .container element:
html,
body {
margin: 0;
}
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
width: 100%;
background: green;
position: relative;
left: -50%;
padding-left: 50%;
padding-right: 50%;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>
Note that the added padding would not work if you somewhere have a box-sizing: border-box rule for all your elements. In this case you'd have to add box-sizing: content-box to the .content rule to reset this parameter to its default.

Answer 2

You can achieve this by so many ways, here I have used ::before pseudo element and without setting it's width apply left:-100% and right:-100%. Which is nothing but cover entire visible width.
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
position: relative;
width: 100%;
background: green;
}
.content::before {
content: "";
display: inline-block;
height: 100%;
background-color: green;
position: absolute;
top: 0;
right: -100%;
left: -100%;
z-index: -1;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>

Answer 3

an idea using border-image
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
margin:0;
border-image: conic-gradient(green 0 0) fill 0//0 100vw;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>