如何重复 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 有响应。

Answer 1

不，在 CSS 中没有 "repeat-content" 或类似的东西。您的第二个片段是现在实现此效果的唯一方法。不过，这样的重复会很好地压缩。

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

如何重复 CSS 伪元素？

How can I repeat CSS pseudo-element?

html

css

pseudo-element