[分享]css列表中li插入前景图

CSS列表中常常使用li元素来进行项目排列，如果想要为这些项目添加更加生动的呈现方式，可以插入前景图。

ul {
  list-style:none;
}
li {
  padding-left:20px;
  background:url("icon.png") no-repeat left center;
} 

上述代码将ul元素的列表样式设置为无，以避免浏览器默认的圆点或数字列表标记。然后为li元素设置左边距为20像素，插入样式为"icon.png"的前景图，将其置于左边缘中央位置。

为了防止前景图与文本内容重叠，我们可以使用padding属性来为li元素设置左内边距，使文本内容与前景图有所间隔。

通过这种方式，我们可以为CSS列表添加更加美观和有趣的视觉效果，使其更加吸引人的眼球。