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属性替换元素中的所有内容。通过将content添加到非伪选择器，该内容将替换::before和::after伪选择器。

因此，请尝试仅使用content和::before伪选择器中的::after属性执行此操作。

＆＃13;

.demo:before {
     content: url('http://placehold.it/350x150')
}

.demo:after {
    content: 'some text';
    display: block;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

甚至可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

有两种不同的结果。

Answer 3

有些浏览器将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 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>

使用CSS内容划分，在伪元素不可见之后

4 个答案: