如何不使用span元素实现块元素与内部文本分别设置不同背景

可以实现，无需额外<span>标签 #

针对你描述的单行文本场景，可使用::first-line伪元素匹配文本内容，完全复现原有效果，CSS代码如下：

body {
  background-color: indigo;
}
p {
  background-color: orange;
  text-align:center;
  font-size: 20px;
}
p::first-line {
  display: inline-block;
  padding: 0 0.5em;
  background-color: moccasin;
}

对应HTML结构和你要求的完全一致：

<p>Highlight this text</p>

注意事项 #

• 上述方案仅适用于单行文本的场景，::first-line伪元素只会匹配块级元素的第一行文本，刚好覆盖你的需求场景，且兼容性极佳，所有主流浏览器都支持该特性
• 如果需要支持多行文本、实现每行文本都带独立moccasin背景的效果，目前纯CSS暂没有完美兼容的无额外标签实现方案，需要借助少量JS或者接受一定的布局限制

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