使用CSS设置响应式通知消息的样式

Question

I'm trying to style a notice message. That is an alert image with a message, like this . I would like it to be with a minimal amount of html, so currently the html for the notice is only

<p class="notice error">This is a message</p>

The jsfiddle does what I want, except that the parent can be of any size, meaning the html above should be responsive. Is it possible to position the icon so that in any situation it is just before the message ? And if this is not possible, other neat solutions are welcome too of course!

Thnx

Answer 1

Sorry for the previous solution, just edited my answer

Use :before pseudo and it will do the job, this way you don't have to add an extra element in your HTML.

Demo

p.notice:before {
    content: "";
    height: 20px;
    width: 20px;
    display: inline-block;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    vertical-align: middle;
}

Answer 2

Add img to HTML:

<div id="parent">
    <p class="notice error"><img src="http://www.foghornnews.com/wp-content/uploads/2013/02/Alert-Icon-.png" alt="warning" />This is a message</p>
</div>

And CSS:

html,body,#parent{
    width:100%;
}

p img{
    height:20px; /* some height */
}

JSFiddle