如何用CSS或JS实现文本容器的背景色偏移效果？

实现方案 #

CSS原生方案（支持自动换行）

利用伪元素复制文本内容，配合换行兼容属性，就能实现支持自动换行的背景偏移效果，无需额外标签：

h1 {
  width: fit-content; /* 让标题宽度随文本自适应 */
}

h1 span {
  position: relative;
  color: #000;
  line-height: 1.6; /* 统一行高，保证偏移对齐 */
}

h1 span::after {
  content: attr(data-text); /* 从data-text属性读取文本内容 */
  position: absolute;
  top: 6px; /* 垂直偏移距离，可自行调整 */
  left: 6px; /* 水平偏移距离，可自行调整 */
  color: transparent;
  background-color: #F4BEBE; /* 偏移后的背景色 */
  z-index: -1;
  /* 核心：确保伪元素文本和原文本换行完全一致 */
  white-space: pre-wrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容webkit内核浏览器 */
}

<h1><span data-text="HEADLINE LONGER THAT WILL WRAP AUTOMATICALLY">HEADLINE LONGER THAT WILL WRAP AUTOMATICALLY</span></h1>

原理：

• 通过data-text同步原文本内容，避免伪元素和原文本内容不一致
• white-space: pre-wrap保证伪元素文本会跟随原文本自动换行
• box-decoration-break: clone让每一行的背景都能独立应用偏移，不会出现跨行背景断裂的问题

JavaScript方案（动态文本场景）

如果标题内容是动态生成（比如后端渲染、用户输入），没办法提前写死data-text，可以用JS自动同步：

document.querySelectorAll('h1 span').forEach(el => {
  el.setAttribute('data-text', el.textContent.trim());
});

这样不管文本怎么变化，伪元素都会自动同步最新内容，完美适配动态场景。

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