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

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

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

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

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