使用::before伪元素在列表项前插入图标需先清除list-style，再通过content设置图标内容（Unicode、字体图标或SVG），结合position或flex控制布局，并确保可访问性与缩放兼容。
直接用 ::before 伪元素在列表项前插入小图标，无需改动 HTML 结构，关键是正确设置 content、display 和定位方式。
确保 list-style 被关闭
默认的圆点或数字会和图标冲突，必须先清除：
ul, ol { list-style: none; }- 如果只针对某类列表，比如
.icon-list { list-style: none; }
给 li 添加 ::before 并设置图标内容
用 Unicode 字符、字体图标（如 Font Awesome 的私有编码）或 base64 图片都行，推荐用字体图标更清晰易控：
- Unicode 示例：
li::before { content: "✓ "; color: #4CAF50; } - Font Awesome（需已引入字体）：
li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; } - 内联 SVG（兼容性好）：
li::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234CAF50' d='M12.7 3.2l-5.8 5.8-2.3-2.3L2 10.4l4.7 4.7L14 7.7z'/%3E%3C/svg%3E"); }
控制图标位置和间距
默认 ::before 是 inline，容易和文字对不齐，建议显式设为 inline-block 或 flex：
立即学习“前端免费学习笔记（深入）”；
li { position: relative; padding-left: 24px; }li::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; }- 或者用 flex 模拟（适合简单场景）：
li { display: flex; align-items: center; } li::before { margin-right: 8px; }
注意可访问性和缩放兼容性
纯装饰图标应避免影响屏幕阅读器，加 aria-hidden="true" 不现实（没改 HTML），所以用 CSS 隐藏语义干扰：
-
li::before { speak: none; }（旧语法，部分支持） - 更稳妥：确保图标只是视觉增强，不传递关键信息；如有语义需求（如“必填”），仍需 HTML 层面补充
aria-label - 用 rem/em 单位代替 px，让图标随字号缩放
基本上就这些。核心是关掉原生 list-style、用 ::before 控制内容与布局、兼顾视觉与可用性。不复杂但容易忽略细节。
