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

Posted 2023-03-05

【中文标题】带有CSS内容的div，伪元素后不可见

【英文标题】：Div with CSS content, after pseudo element is not visible

【发布时间】：2017-07-27 08:44:40

【问题描述】：

我有一个必须完成的 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/

【问题讨论】：

可能重复：***.com/questions/6949148/…

@pzworks：甚至没有接近。

【参考方案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 伪元素，而不是元素本身。

【参考方案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>

【参考方案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>

【讨论】：

只是补充说明一下，content 仅适用于伪元素，即 :before 和 :after，因此将 content 用于 .demo 将失败。

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

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

@BoltClock 我的错，我的意思是你需要有content 用于伪元素，没有它们，它不会渲染。有点仅供参考。不过谢谢...@Jamy 也感谢您的澄清。

【参考方案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>

有两种不同的结果。