如何重复 CSS 伪元素？答案

【问题标题】：How can I repeat CSS pseudo-element?如何重复 CSS 伪元素？
【发布时间】：2017-08-22 09:06:30
【问题描述】：

我有代码：

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

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

&lt;div&gt;&lt;/div&gt;

我想用伪元素填充 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;
}

&lt;div&gt;&lt;/div&gt;

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

【问题讨论】：

How to repeat an item multiple times in HTML or CSS?的可能重复
你不能用 content: ... 和纯 css 做到这一点。
@the4kman，不，不想做一样的，所以我可以有太多的话，它不仅仅是5星。在加上减号之前仔细阅读问题！我问的是多次重复

标签： html css pseudo-element

【解决方案1】：

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

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

【讨论】：