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

我正在尝试设计一个通知消息的样式。这是一个带有消息的警报图像，如。 我希望它是一个最小的html量，所以目前的html通知是唯一的

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

这是一条消息

JSFIDLE做了我想要的事情，除了父级可以是任意大小，这意味着上面的html应该是响应性的。是否可以定位图标，使其在任何情况下都位于消息之前？如果这是不可能的，当然也欢迎其他简洁的解决方案

---

Thnx

将

img

添加到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>

---

将

img

添加到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>

---

对不起，前面的解决方案刚刚编辑了我的答案

使用

：在

pseudo之前，它将完成这项工作，这样您就不必在HTML中添加额外的元素

---

对不起，前面的解决方案，刚刚编辑了我的答案

使用

：在

pseudo之前，它将完成这项工作，这样您就不必在HTML中添加额外的元素

---

我猜你没有回答他的问题，在他的演示中调整元素的大小，然后看到图标在我的小提琴中消失得很远。因为你使用的是

img

标记，而op使用的是

background

是，我说“将

img

添加到HTML”。这是一个没有使用

background

属性的示例。我想你没有回答他的问题，在他的演示中调整元素的大小，然后看到图标在我的小提琴中消失得很远。因为你使用的是

img

标记，而op使用的是

background

是，我说“将

img

添加到HTML”。这是一个不使用

background

属性的示例。

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