带有CSS内容的div，伪元素后不可见

Question

我有一个必须完成的 POC，我只能使用 CSS 来更新产品的样式。我已使用 CSS 内容属性将其中一张产品图片替换为徽标。

我必须在此徽标之后添加一个带有电话号码的简单字符串。我试图使用:after 伪元素来做到这一点。这仅适用于 div 的内容为空（徽标已删除）时。

.demo {
  content: url('http://placehold.it/350x150')
}

.demo:after {
  content: 'test';
  display: inline-block;
}

<div class="demo"></div>

我已尝试将display 更改为inline-block 并为这两个规则硬编码height 和width。基本上我能找到的一切。任何帮助将不胜感激。

这里的JSFiddle：https://jsfiddle.net/qykbjznm/

Answer 1

一些浏览器将content 属性应用于实际元素，尽管它是not being supported in CSS2。 css-content-3 有望实现这一点，但在 3 级规范成为标准之前，这实际上在未来几年内不会发生（特别是考虑到它在过去的14年），将content 应用于实际元素应被视为非标准行为。

当content 属性的值为图像时，that image is inserted as replaced content。并且当它应用于实际元素时，这会阻止该元素具有 ::before 和 ::after 伪元素。这就是你的::after 伪元素没有出现的原因。

如前所述，您所要做的就是将图像应用到元素的 ::before 伪元素，而不是元素本身。

Answer 2

我稍微弄乱了你的 JSFiddle，我发现让电话号码显示在当前 div 下方的唯一真正方法是创建另一个 div：

<div class="demo"></div>
<div class="demo2"></div>
<style>
  .demo {
    content: url('http://placehold.it/350x150');
    height:150px;
    width:350px;
  }

  .demo2:before {
    content: "test";
  }
</style>

Answer 3

content 属性替换元素中的所有内容。通过将content 添加到非伪选择器，该内容将替换::before 和::after 伪选择器。

因此，请尝试仅在 ::before 和 ::after 伪选择器中使用 content 属性。

.demo:before {
     content: url('http://placehold.it/350x150')
}

.demo:after {
    content: 'some text';
    display: block;
}

<div class="demo"></div>

Answer 4

您可以从 CSS 中替换背景并将其作为图像放入 HTML：

.demo::after {
    content: 'test';
    display: inline-block;
}

<div class="demo">
  <img src='http://placehold.it/350x150'/>
</div>

甚至可以这样做：

.demo {
     background: url('http://placehold.it/350x150');
     height:150px;
     width:350px;
}

.demo::after {
    content: 'test';
}

<div class="demo"></div>

有两种不同的结果。