CSS问题：文本位置不变，背景色撑满页面且通过WCAG Axe测试

可以利用CSS伪元素实现需求，既不改变文本位置，也能让背景撑满全屏，同时避免元素重叠导致的无障碍测试问题：

.container {
  display: block;
  margin: 0 auto;
  width: 50%;
  background: grey;
  height: 100vh;
}

.content {
  width: 100%;
  position: relative; /* 让伪元素相对于自身定位 */
}

.content::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* 背景撑满视口宽度 */
  background: green;
  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>

方案优势（适配无障碍测试）： #

• 伪元素不会新增冗余DOM节点，不干扰屏幕阅读器对内容的语义化读取
• 背景层置于文本下方（z-index: -1），完全不会遮挡可交互元素或引发焦点重叠问题
• 文本原有布局结构保持不变，符合无障碍设计的语义化要求

内容的提问来源于stack exchange，提问作者Hidden