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 >
  <p >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.

CodePudding user response：

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 >
  <p >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.

CodePudding user response：

• 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 >
  <p >this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>

CodePudding user response：

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 >
  <p >this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>