应使用::after伪元素+内联SVG或data URL实现时间线节点图标，因background-image缺乏语义、不可访问、缩放失真、打印丢失、无法动态换色且无加载fallback。
时间线节点图标不能靠 background-image 硬塞，否则会和语义、可访问性、缩放、打印全冲突；真正可控又健壮的做法是用 ::after 伪元素 + SVG 内联或 data URL。
为什么不用 background-image 给 li::before 加图标
看似简单，但实际踩坑密集：
-
background-image不支持语义化替代文本（alt），屏幕阅读器完全忽略它 - 缩放时图标易糊、偏移，尤其在 macOS Retina 或 Windows 高 DPI 下
- 打印预览中多数浏览器直接丢弃
background-image - 无法用 CSS 变量动态换色（比如深色模式下自动变白）
- 加载失败时留白，无 fallback 机制
::after 里嵌 SVG 图标怎么写才稳
直接把 SVG 写进 content 属性，用 data:image/svg+xml 编码，保证零请求、高保真、可继承颜色：
- 必须 URL 编码：尖括号
→ <code><，双引号"→"，空格 →%20 - 推荐用
fill="currentColor"，这样图标颜色自动跟随父元素color，深色模式开箱即用 - 尺寸靠
font-size控制（因为content是行内内容），不是width/height - 示例（一个实心圆点）：
li::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='currentColor'/%3E%3C/svg%3E"); display: inline-block; width: 1em; height: 1em; vertical-align: middle; }
自定义图标要区分「状态」还是「类型」
图标含义不同，实现方式就该不同：
立即学习“前端免费学习笔记（深入）”；
- 如果图标表达「状态」（如 ✅ 已完成 / ⏳ 进行中 / ❌ 失败），建议用 JS 动态加 class，再用对应 SVG data URL —— 避免把逻辑塞进 CSS
- 如果图标表达「类型」（如 ? 文档 / ? 代码 / ? 视频），可直接写死在 HTML 的
time或span里，用aria-label补充说明 - 千万别用 Unicode 字符（如
✅）当图标：渲染不一致、字体缺失时变方块、无法配色、读屏器朗读不可控
最易被忽略的一点：所有自定义图标必须有明确的视觉对比度（至少 4.5:1）和点击热区（最小 44×44px），否则移动端点不准、色弱用户看不见——这比“好不好看”优先级高得多。
