CSS内容的Div，after伪元素不可见

Question

我有一个需要完成的POC，只被允许使用CSS来更新产品的样式。我已经通过使用CSS content属性将产品的其中一张图片替换为了一个标志。

我必须在这个标志后添加一个简单的带电话号码的字符串。我尝试使用 :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/

- ICodeGorilla

---

可能是重复的问题：https://dev59.com/dWw05IYBdhLWcg3w6GAw - pzworks

@pzworks：差得太远了。 - BoltClock

Answer 1

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>

- Jamy

---

只是作为解释的补充，content仅在伪元素上起作用，即:before和:after。因此，在.demo中使用content将失败。 - Mr. Alien

@Mr.Alien，如果您查看OP提供的JSfiddle，content被应用于非伪选择器，并且呈现为::before/::after中的content，这是他遇到问题的根本原因。 - Jamy

@Mr. Alien：更正一下，它只在 ::before 和 ::after 上被支持。有些浏览器确实会将内容应用于实际元素，但这被认为是非标准行为。 - BoltClock

@BoltClock 对不起，我的意思是伪元素需要有“content”才能渲染，没有它们就不会渲染。只是提供信息。不过还是谢谢你... @Jamy 也感谢你的澄清。 - Mr. Alien

Answer 2

你可以从CSS中替换背景，并将其作为图像放在HTML中：

您可以从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>

有两个不同的结果。

- Albzi

Answer 3

一些浏览器会将content属性应用于实际元素，尽管它在CSS2中不受支持。预计css-content-3将允许此操作，但在第三级规范成为标准之前，这可能需要几年时间（特别是考虑到在过去的14年中没有发生过）。因此，将content应用于实际元素应被视为非标准行为。

当content属性的值是图像时，该图像将作为替换内容插入。如果将其应用于实际元素，则会防止该元素具有::before和::after伪元素。这就是为什么您的::after伪元素不显示的原因。

如上所述，您只需要将图像应用于元素的::before伪元素，而不是元素本身即可。

- BoltClock

Answer 4

我已经在你的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>

- Joel Giovinazzo