CSS:如何在CSS中的每个h3之前显示图像图标？

Question

我有wordpress侧边栏:

<h3 class="widget-title">TITLE OF SIDEBAR</h3>

我需要在 "TIDELE OF SIDEBAR" 之前显示小图标.我可以使用CSS吗？

或者我必须手动将图像添加到代码中？喜欢:

<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>

Answer 1

伪元素将做你想要的.使用:before伪元素,您的CSS将如下所示:

h3.widget-title:before {
    content: url('/path/to/image');
}

这将在文本内容之前放置一个图像<h3>,但是这根本不会改变DOM,这一点很重要.

关于伪元素如何工作的一个很好的解释可以在这里找到CSS Tricks.

Answer 2

如果您的图片宽度为10px,您可以尝试这样做:

.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}