:before 选择器不添加内容

Question

我正在尝试在其他图片之前添加一张图片。它应该在除第一个图像之外的每个图像之前。所以想像这样添加它：

.class3:not(:first-child):before {
  background-image: url('image.jpg');
  width: 2rem;
  height: 2rem;
}

html 通过 Backbone 动态添加并使用 Handlebars。它看起来像这样：

<div class="class1">
  <div class="class2">
    {{#each item}}
      <div class="class3" style="background-image: url('{{image1}}')">
        <p>{{text}}</p>
        <img class="dialog-popup-rewards" src={{image2}} />
      </div>
    {{/each}}
 </div>
</div>

但没有添加任何内容。我以较低的复杂性测试了 before 语句。为所有的 div 添加一个 before:

.class3:before {
    background-color: black;
    width: 2rem;
    height: 2rem;
}

它永远不会被添加。我错过了什么？为了清楚起见，我重写了代码，所以我可能会出现一些语法错误。

用 Handlebars 助手试试这个会更好吗？

提前致谢。

Answer 1

您需要在 :before css 块中包含内容属性。它可以只是一个空字符串。为您的简化示例尝试此操作：

.class3:before {
    content: '';
    background-color: black;
    width: 2rem;
    height: 2rem;
}

:before 选择器不添加内容

:before selector not adding content

html

css

pseudo-element

backbone.js

handlebars.js