多个:在css中的伪元素之前或:之后

Question

让我们说我有一个包含通知消息的div

<div class="notification"></div>

消息是通过PHP动态生成的

<div class="notification><?php echo $notif;?></div>

但我希望那个div说它持有通知

Notification: [notification message]

所以我输入了css:

.notification:before{
    content:'Notification: ';
}

问题是我可以为该div添加另一个内容.例如,我想在通知之前出现警告图片:

所以可以把另一个和之前

.notification:before{
     content:url(warning.png);
}

如果我喜欢那最后一个来了.那么如何展示它们呢？

Answer 1

您可以将图像设置为背景:before,如下所示:

.notification:before {
    content: 'Notification: ';
    padding-left: 20px;
    background: url('warning.png') left center no-repeat;
}

JSFIDDLE DEMO