Multiple :before or :after pseudo-elements in css

Question

Let us say that i have a div that holds the notification messages like

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

The message is generated dynamically through PHP like

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

But I want that div to say that it holds notification like

Notification: [notification message]

So I put in css:

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

The problem is can I put another content just for that div. for example I want a warning picture to appear before Notification:

So can put another before and

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

If i do like that the last one comes. So how can I show both of them?

Answer 1

You could set the image as a background to the :before , like this:

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