CSS中多个：before或：after伪元素

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;
}