本文围绕 temperature=0.6如何在HTML中自定义列表符号？用CSS伪元素实现的5种实战做法展开。通过五种不同的伪元素策略，帮助开发者在不改变语义的前提下，定制列表的外观以匹配设计系统。
1. 使用 ::marker 自定义列表符号的颜色与大小
原理与兼容性
在现代浏览器中，::marker 伪元素位于每个 li 项的标记处，允许直接修改符号的颜色、字体与尺寸等属性而不破坏文本逻辑。兼容性方面，主流浏览器已广泛支持，但旧版浏览器可能不支持。
要启用 ::marker，通常保持 list-style 为默认或明确指定类型，然后通过 li::marker 选择器覆盖样式。这样可以保留无障碍排序与屏幕阅读器对列表的理解。
ul.custom-marker { padding-left: 2em; }
ul.custom-marker li::marker { color: #e91e63; font-size: 1.2em; }<ul class="custom-marker"><li>项目一</li><li>项目二</li><li>项目三</li>
</ul>要点总结：使用 ::marker 可以在不改变语义和结构的情况下，快速实现颜色和字号等视觉调整，兼容性要点需在目标平台测试。
2. 使用 ::before 插入自定义符号（形状与颜色任意）
实现要点
当需要自定义任意形状的符号时，list-style 设置为 none，然后通过 li::before 插入符号实现，位置通过 padding-left 调整，文本对齐保持一致。
该方法最大的优势是自由度高，可以实现圆点、箭头、星星等任意图形，且兼容性广泛。缺点是需要手动控制箭头的水平对齐与缩进。
ul.bullet-before { list-style: none; padding-left: 2em; position: relative; }
ul.bullet-before li::before {content: "▶"; /* 或使用任意符号 */color: #1e88e5;position: absolute;left: 0;
}
<ul class="bullet-before"><li>项A</li><li>项B</li><li>项C</li>
</ul>关键点：li::before 的内容可以是文本符号，也可以是图片或图标，只要确保布局稳定，避免打断行高。
3. 使用 data-attribute + ::before 实现动态符号
动态符号与可维护性
通过在 li 上添加自定义数据属性，如 data-symbol，再用 li::before 的 content 使用 attr(data-symbol) 获取符号，可以实现“可维护、可配置”的符号库。
这种方式在页面中需要根据设计系统快速替换符号时特别有用，维护性高，也便于通过 JavaScript 动态调整符号。
ul.data-symbol { list-style: none; padding-left: 2em; }
ul.data-symbol li::before {content: attr(data-symbol);color: #6d4c41;margin-right: .5em;display: inline-block;
}
<ul class="data-symbol"><li data-symbol="○">项一</li><li data-symbol="■">项二</li><li data-symbol="◇">项三</li>
</ul>要点：data-symbol 属性让符号与数据绑定，attr() 在 content 中读取属性值，兼容性在现代浏览器良好。
4. 使用图片或 SVG 作为符号（伪元素中的图像实现）
图标化符号的可视化效果
当设计中需要高保真图标时，可以让伪元素的 content 或 background-image 指向一个图像或内嵌 SVG，达到“图标化符号”的效果，而不改变原有文本的结构。
以 SVG 为例，可以通过 data URL 将小图标嵌入到样式中，降低 HTTP 请求数量，同时保持可伸缩性和清晰度。
ul.icon-svg { list-style: none; padding-left: 2em; }
ul.icon-svg li::before {content: "";display: inline-block;width: 1em; height: 1em;background-image: url("data:image/svg+xml;utf8,");background-size: contain;background-repeat: no-repeat;margin-right: .5em;
}
<ul class="icon-svg"><li>项一</li><li>项二</li><li>项三</li>
</ul>核心要点：使用图像/ SVG 可以实现高度自定义的视觉效果，但需要注意图像加载和可访问性，例如为图标提供替代文本与合理的对比度。
5. 使用 CSS Counter 与 ::before 结合实现自定义数字序号
自定义数字序号的实现
如果你希望完全控制数字序号的格式、语言或风格，可以借助 CSS 的 counter 功能与 li::before 共同实现。通过 counter-reset、counter-increment 与 content 自定义序号，甚至结合图形符号实现混合型标记。
该方法不破坏有序列表的语义，且能灵活变换不同的层级符号，适合复杂设计系统。
ol.custom-counter { counter-reset: item; padding-left: 2em; }
ol.custom-counter > li { list-style: none; counter-increment: item; padding-left: 0.5em; position: relative; }
ol.custom-counter > li::before {content: counter(item) ". "; /* 1.、2.、3. ... */position: absolute; left: -2em; width: 2em; text-align: right;color: #333;
}
<ol class="custom-counter"><li>项A</li><li>项B</li><li>项C</li>
</ol>要点总结：CSS Counter 提供了稳定的数字序号定制能力，结合 ::before 可以实现统一的视觉风格，层级控制 也更直观。
