如何重复 CSS 伪元素？

Question

我有代码：

div {
  position: relative;
  background: blueviolet;
  height:100px;
}

div:before {
  content: 'sale';
  color: white;
}

<div></div>

我想用伪元素填充 div：

div {
  position: relative;
  background: blueviolet;
  height: 100px;
}

div:before {
  content: 'sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale ';
  color: white;
}

<div></div>

我可以用重复内容之类的东西来做到这一点吗？我不想手动重复这个词，div 是响应式的。

Answer 1

不，CSS 中没有“重复内容”或类似的东西。您的第二个代码段是现在实现此效果的唯一方法。不过，这种重复会被很好地压缩。

理论上，element()CSS 中有一个功能可以将一个 HTML 元素（但不是伪元素）用作另一个元素（包括重复背景）的背景。不幸的是，它仅在 Firefox 中受支持。