列表样式生成器

使用实时预览生成 CSS 列表样式。从标准符号、数字、表情符号、自定义图片等中选择。一键复制 CSS 代码。纯客户端。

16px
40px
1.6
预览
  • Item 1
  • Item 2
  • Item 3
示例项目
CSS 代码

关于 CSS 列表样式生成器

CSS list-style 控制列表项的标记方式。本生成器让您预览所有标准 CSS 列表类型，并创建自定义标记，包括表情符号、图标或图片。生成的 CSS 使用 ::marker 伪元素，并为现代浏览器提供降级支持。

功能特点

常见问题

什么是 CSS ::marker 伪元素？

::marker 伪元素用于定位列表项的标记框。它允许您使用自定义颜色、字体和大小来设置项目符号和编号的样式。现代浏览器支持 ::marker，但生成器也为旧浏览器提供降级 CSS。

可以使用自定义图片作为列表标记吗？

可以，您可以使用 list-style-image 属性或带有 content 的 ::marker 伪元素。生成器支持两种方法。为获得最佳效果，请使用小型 SVG 或 PNG 图片（16x16px 到 24x24px）。

哪些浏览器支持 ::marker？

::marker 伪元素在所有现代浏览器中都受支持，包括 Chrome 86+、Firefox 68+、Safari 11.1+ 和 Edge 86+。对于旧浏览器，生成器使用标准 list-style 属性提供降级 CSS。

如何更改列表编号的颜色？

使用 ::marker 伪元素配合 color 属性。生成的 CSS 自动包含此功能。对于有序列表，这会改变编号的颜色，而列表项文本保持原有颜色。