如何使用 CSS 在列表中添加图像作为列表项标记？

在 HTML 中，我们通常使用

和
• 元素来创建无序列表或有序列表。默认情况下，列表项的标记为实心圆点或数字。但有时候我们可能需要使用图片作为列表项的标记，以达到更好的视觉效果。下面介绍一些使用 CSS 在列表中添加图像作为列表项标记的方法。

方法一：使用 background-image 属性

可以为列表项的 ::marker 伪元素设置背景图片，具体方法是在 CSS 中为 ::marker 伪元素添加 background-image 属性，将其设置为列表项标记需要的图片路径即可。

ul li::marker {
  background-image: url("path/to/image.jpg");
  background-size: contain;
}

在上面的代码中，我们使用了 background-size 属性将图片调整到合适的大小，以便与文本内容对齐。

需要注意的是，使用这种方法添加的图片会替换默认的列表项标记，但仍然可以通过 CSS 选择器来控制它的样式和位置。

方法二：使用 list-style-image 属性

使用 list-style-image 属性也可以实现在列表中添加图像作为列表项标记的效果。这种方法与方法一类似，只需要为列表添加 list-style-image 属性，并将其对应的值设置为需要的图片路径即可。

ul {
  list-style-image: url("path/to/image.jpg");
}

需要注意的是，使用这种方法添加的图片同样会替换默认的列表项标记，但由于是应用在列表上而非单独的列表项，所以对图片的样式控制相对困难。

方法三：使用伪元素和 content 属性

使用伪元素和 content 属性也可以实现在列表中添加图像作为列表项标记的效果。这种方法的核心就是使用 ::before 或 ::after 伪元素插入一个元素，然后使用 content 属性为其设置需要的图片路径。

ul li::before {
  content: url("path/to/image.jpg");
  margin-right: 10px;
}

在上面的代码中，我们为每个列表项的 ::before 伪元素添加了图片内容，并使用 margin-right 属性将其与文本内容对齐。

需要注意的是，使用这种方法添加的图片仍然需要通过 CSS 选择器来控制其样式和位置，但相比于方法一和方法二更加灵活和可控。

总结

在列表中添加图像作为列表项标记可以有效提升页面的可视化效果，同时也为用户提供更好的视觉体验。除了上述介绍的三种方法，还有很多其他的方法可以实现类似的效果，具体使用方法可以根据实际需求来选择。