用 ::before 伪元素可完全自定义列表前缀，通过 list-style: none 清除默认样式，再用 content、display、margin、background 等属性控制图标、颜色、大小、间距及形状，并兼顾响应式与可访问性。
直接用 CSS 的 list-style-type（比如 disc、circle、square）确实容易显得单调，甚至和整体设计不搭。更灵活、更美观的方式是用 ::before 伪元素完全自定义列表项前缀——颜色、大小、间距、图标、动画都能自由控制。
用 ::before 替换默认标记
先去掉浏览器默认样式，再用 ::before 手动添加内容：
- 给
li设置list-style: none，清空原生前缀 - 给
li::before设置content（可以是字符、Unicode 图标，或用url()引入 SVG） - 通过
display: inline-block、margin-right等微调位置和间距
用 Unicode 或字体图标增强表现力
比纯圆点更有设计感的常见做法：
- 用箭头类符号：如
content: "→";、content: "◆";、content: "•"; - 用 Font Awesome 或 Iconfont 时，可写成
content: "\f00c";（需确保字体已加载且font-family正确） - 搭配
font-size和vertical-align让图标与文字基线对齐
加颜色、背景、圆角，做出「标签式」前缀
让前缀不只是符号，而是有视觉分量的小元素：
立即学习“前端免费学习笔记（深入）”；
- 设置
background-color+border-radius做小圆点或胶囊形 - 用
width/height+line-height实现居中（适合块级::before） - 例如：
content: ""; display: inline-block; width: 8px; height: 8px; background: #4285f4; border-radius: 50%; margin-right: 12px;
响应式适配与可访问性提醒
美观不能牺牲可用性：
- 小屏下适当减小
::before尺寸和间距，避免挤占文字空间 - 避免仅靠颜色区分信息（比如红/绿圆点），必要时搭配文字或图标差异
- 如果前缀含语义（如“必填”“新功能”），建议用
aria-label或隐藏文本补充说明
基本上就这些——::before 方案自由度高、兼容性好（IE8+ 支持），改起来也快。关键是把前缀当成一个独立的视觉模块来设计，而不是附属装饰。
