Html 多个背景图像，带有首字母和url（）

在我的页面上，我希望按钮的左侧有小图标，类似这样：

按钮背景应为浏览器的默认设置

当我只指定我的背景图像时，

初始

背景图像被覆盖。因此，我认为指定多个背景图像可以解决问题：

background-image: initial, url("edit.png");
/* background-position .... */

但这是不被支持的；在此上下文中不能使用

initial

（只有

url（）

有效）

---

有没有一种方法可以在不使用其他图像的情况下实现这一效果？

以下是我如何实现您想要的效果：

<button>Edit</button>

button:before {
    content: "";
    display: inline-block;
    background-image: url('http://placekitten.com/10/10');
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

编辑
按钮：之前{
内容：“；
显示：内联块；
背景图像：url（'http://placekitten.com/10/10');
宽度：10px；
高度：10px；
右边距：5px；
}

结果:

演示：

---

这将允许您根据需要为按钮设置单独的背景图像。

谢谢。这只适用于

，对吗？有没有办法用

-标签来实现这一点？我认为您不能在

上使用

:before

或

:after

。。。没错，但我忘了你可以用

来代替。