为什么 CSS 内容图像不显示？

Question

考虑这个 html：

<div class="logo-b"></div>

还有这个 CSS：

div.logo-b {
    content: url(http://placehold.it/350x150);
    height: 150px;
    border: 1px solid darkred;
}

我正在尝试使用 CSS 显示图像。图像未显示。请参阅此jsfiddle 以了解我的意思。请问我错过了什么？

编辑：Chrome 似乎按照我在上面提供的方式渲染了小提琴，但 Firefox（我使用的）没有。如果我将:before 或:after 添加到我的CSS 中的类名，图像将显示在Firefox 中。有人能解释一下为什么会这样吗？

编辑：我使用错误的构造将图像放置在我的页面上。在我正在做的事情的上下文中，我应该使用<img> html 标记。 CSS content 构造使用 :before 和/或 after 来放置内容，包括图像，但我知道这些是在特定上下文中使用的。我只是想显示一个徽标。

Answer 1

此属性content 与:before 和:after 一起使用 在文档中生成内容的伪元素。 -W3C

我认为 Firefox 中的行为是正确的。