要用 CSS 自定义列表符号的颜色、大小和动画，必须绕开 list-style-type，改用 ::marker 或 ::before；前者支持 color/font-size/content 但兼容性有限，后者最稳妥可控。
直接用 list-style-type 只能选预设符号，真要换图标、改颜色、加动画，得绕开它——不是不能用，而是它不够用。
为什么 list-style-type 改不了颜色和大小
这个属性只控制“类型”，比如 disc、square、lower-roman，浏览器渲染时把符号当装饰性图形处理，不参与 CSS 继承链。所以给 li 设 color 或 font-size，对默认符号完全无效。
-
list-style-type: disc;后加color: red;→ 圆点还是灰色 -
font-size: 20px;也只放大文字，符号尺寸不变 - 想让符号变大变色，必须换方案：要么用
::marker，要么用::before
::marker 能做什么、不能做什么
它是专为项目符号设计的伪元素，支持 color、font-size、content（单字符或 emoji），但不支持 margin、padding、background，也不能嵌套 HTML 或 SVG。
- 合法写法：
li::marker { content: "→"; color: #007acc; font-size: 1.3em; } - 非法写法：
li::marker { background: yellow; }→ 无效 - IE 完全不支持；Edge 18– 不支持
content；上线前务必查 caniuse - 中文排版慎用
list-style-position: inside，容易和首行缩进冲突
用 ::before 实现真正自由的符号
这是最稳妥、兼容性最好、控制力最强的方式：先清空默认符号，再手动在 li 前插入内容，并精确定位。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须先写：
ul, ol { list-style: none; }，否则::before会和原符号重叠 -
li要设position: relative;，才能让::before的position: absolute;有参照 - 常用定位组合：
left: 0;+top: 50%;+transform: translateY(-50%);垂直居中 - 插入图标推荐用 Unicode（如
"•"、"✓"）或 Font Awesome 类名（content: "\f00c";），避免图片路径出错
图片符号为什么总对不齐
list-style-image 看似简单，实际最难调：它依赖图片自身尺寸和基线，不同浏览器渲染差异大，且无法单独控制大小或垂直对齐。
- 常见现象：图标飘高、下沉、左右偏移，尤其在多行文本时错位更明显
- 替代做法：用
background-image+padding-left，例如：li { background: url(arrow.svg) no-repeat left center; padding-left: 24px; } - 注意：SVG 作为背景图时，
background-size必须显式设置，否则可能被拉伸或裁剪 - 如果用
list-style-image，建议只用于单色、尺寸固定的小图，且测试 Chrome/Firefox/Safari 三端表现
真正麻烦的从来不是“怎么加符号”，而是“怎么让符号在所有行高、字体、缩放比例、屏幕阅读器下都稳定出现”。::before 方案虽然代码多几行，但可控性远高于其他方式——尤其是当你需要响应式缩放或适配深色模式时，它的变量和 calc() 支持才是关键。
