用::before替换ul默认圆点需先设list-style:none清除原生符号，li设position:relative，::before用display:inline-block+vertical-align:middle居中，content用unicode字符或svg data url实现兼容性图标。
如何用 ::before 替换 ul 默认圆点
直接去掉默认样式，用 ::before 重绘图标，比改 list-style-type 灵活得多。关键在清除原生符号 + 定位新内容。
- 必须给
li设置position: relative，否则::before的absolute定位会脱标 - 用
list-style: none干掉浏览器默认圆点，这步漏了就会叠在一起 -
::before默认是行内元素，想居中对齐建议用display: inline-block+vertical-align: middle - 图标大小和间距靠
width/height和margin-right控制，别依赖content里的空格缩进
content 里写什么才能显示自定义符号
不能只写文字或 emoji —— 要考虑兼容性和可维护性。纯字符容易错位，SVG 又太重，折中方案更实用。
- 简单场景用 Unicode 字符：
content: "•"、content: "→"、content: "✓"，渲染快且无需额外资源 - 需要颜色/尺寸独立控制时，用
content: ""配合background-image引入 SVG data URL，避免外链请求 - 千万别写
content: " "（空格）来占位——它不触发渲染，伪元素可能消失 - 若用字体图标（如 Font Awesome），确保
font-family正确加载，且content值是对应 Unicode 码点，比如\f00c
为什么 ::before 图标总对不齐文字基线
这是最常见的布局断裂点：伪元素默认按字母底部对齐，而文字有降部（g、y 等），视觉上就偏低。
- 优先试
vertical-align: middle，适用于图标高度 ≈ 行高 50% 的情况 - 更稳的方式是用
transform: translateY(-50%)配合top: 50%，但前提是父li有position: relative - 避免用
line-height拉高整体来“凑齐”，会破坏段落行距一致性 - 如果列表项含多行文本，
::before的top建议设为0.2em这类相对单位，比固定像素更适应字体变化
IE11 及以下不支持某些 ::before 写法怎么办
IE 对伪元素的 content 和定位支持有限，特别是混合使用 transform 和 absolute 时容易失效。
立即学习“前端免费学习笔记（深入）”；
- 老项目需兼容 IE11，就别用
transform: translateY()垂直居中，改用top: 0.35em这类经验值 - 避免在
::before中用background-image加 SVG data URL —— IE11 对 data URL 解析不稳定，换成 base64 或外链 PNG -
content中不要用 CSS 变量，IE 完全不识别；所有值必须是静态字符串或转义码 - 测试时重点看嵌套
ul（二级列表），IE 下子列表的::before常因继承position出问题，需显式重置position: static
li 的盒模型、字体度量、伪元素渲染机制串起来看。 
