html - 是否可以仅使用 CSS 为单个单词设置背景颜色？

Question

我正在尝试重现这种效果:

h1 span {
    background: #000;
    color: #fff;
    padding: 0 4px;
}

<h1>
    <span>This</span>
    <span>is</span>
    <span>Life</span>
</h1>

但是，我正在工作的元素是要在 CMS 上使用的，我不能指望我的客户知道如何添加 span 标签(特别是因为它需要在实际站点上使用一个类)。所以我想知道是否可以在不将每个单词分解成单独的元素的情况下重新创建这种效果。我已经知道这可以通过 JavaScript 实现，并且正在专门寻找纯 CSS 解决方案。

Answer 1

您可能要考虑的一件事是 nth-child , 如果你想按特定顺序设置单词的样式。但是，如果您希望根据文字本身来设置样式，不，您不能只使用 CSS。