Div与CSS内容,伪元素不可见

我有一个POC,我必须完成,我只允许使用CSS来更新产品的样式.我已经使用CSS内容属性替换了其中一个具有标志的产品的图像.

我必须添加一个带有电话号码的简单字符串,以便在此标志后显示.我试图使用：after伪元素来做到这一点.只有当div的内容为空(标志被删除)时,这才有效.

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

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

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

我已经尝试将显示更改为内嵌块,并且硬编码两个规则的高度和宽度.基本上我可以找到的一切.任何帮助将不胜感激.

JSfiddle这里：https://jsfiddle.net/qykbjznm/

解决方法

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>

原文地址：https://www.jb51.cc/css/214317.html