html - 如何在css中改变TEXT的背景颜色

Question

举个例子:

<div id="div1">This is a sentence.</div>

<div>填满 100% 的行。

文本本身，只是其中的一小部分。

我想给文本一个背景色，而不给整行一个背景色。

我可以更改 html 并添加 span当然。 (并将此跨度与 background-color 一起使用)

<div id="div1"><span>This is a sentence.</span></div>

但是在不改变 html 的情况下，是否可以在纯 css 中实现？

PS:我正在为 hyper 制作一个 css 代码终端。

解决方案(对于所有 div):

div{display:table;}

这完全摧毁了tmux行为(在 hyper 内)但也许我要求太多...

echo -e "\n\n"也成为一个问题。 :p

此问题的解决方案:(空 div 不占用空间)

div:after{content: " ";}

Answer 1

你可以使用 :before 来应用 CSS

#div1 {
  color: blue; // hide original text
  background-color: blue;
  position: relative;
}

#div1:before {
  content: 'This is a sentence.';
  background-color: purple;
  display: inline;
  color: white;
  position: absolute;
}

<div id="div1">This is a sentence.</div>

---

如果你不需要 #div1 是全宽的，那么只需将 #div1 {display: inline-block} 应用到它，它就会作为 span 元素