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

时间:2015-04-13 08:26:02

标签: html css

让我们说我有一个包含

等通知消息的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);
}

如果我确实喜欢那最后一个来了。那么如何展示它们呢?

1 个答案:

答案 0 :(得分:5)

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

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

JSFIDDLE DEMO