免费在线CSS列表样式生成器，自定义有序/无序列表的标记类型、颜色、大小和位置。支持list-style-type、list-style-position、::marker伪元素，实时预览效果，一键复制CSS代码。无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
⚙️ 列表样式设置
自定义列表标记的类型、颜色、大小和位置。
无序列表 (ul)
有序列表 (ol)
1.2em
16px
2
👁️ 实时预览
同时查看无序和有序列表的样式效果。
无序列表
有序列表
💻 CSS代码
📖 CSS列表样式详解
CSS列表样式使用 list-style 简写属性或其子属性：list-style-type（标记类型）、list-style-position（标记位置）和 list-style-image（标记图片）。
::marker伪元素
::marker 伪元素让你独立控制列表标记的样式，包括颜色、字体大小和字体族。例如：li::marker { color: #f59e0b; font-size: 1.5em; }。支持Chrome 86+、Firefox 68+、Safari 11.1+。
CSS计数器
使用 counter() 和 counter-increment 可实现高级多级编号，如1.1、1.2、2.1，适用于文档大纲和法律条款。
常见问题
::marker伪元素
::marker 伪元素让你独立控制列表标记的样式，包括颜色、字体大小和字体族。例如： li::marker { color: #f59e0b; font-size: 1.5em; } 。支持Chrome 86+、Firefox 68+、Safari 11.1+。
CSS计数器
使用 counter() 和 counter-increment 可实现高级多级编号，如1.1、1.2、2.1，适用于文档大纲和法律条款。