如何重复使用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>

我可以使用类似于repeat-content这样的东西来实现吗？我不想手动重复单词，而且这个div是响应式的。

- kizoso

---

可能是如何在HTML或CSS中多次重复一个项目？的重复问题。 - Tamás Sengel

你不能使用 content: ... 和纯CSS 来完成这个任务。 - Patrick Mlr

@the4kman，不，我不想重复这个问题，因此可以有太多的字，而不仅仅是五个星。在打负号之前，请仔细阅读问题！我正在询问多次重复的事情。 - kizoso

Answer 1

没有所谓的“重复内容”或类似的CSS属性。您的第二个片段是现在实现此效果的唯一方法。这种重复虽然可以压缩得很好。

理论上，CSS中有一个element()函数，使得使用一个HTML元素（但不包括伪元素）作为另一个元素（包括重复背景）的背景成为可能。不幸的是，它只在Firefox中支持。

- Ilya Streltsyn