最可控、兼容性最好、易响应式适配的列表美化路径是用list-style: none清除默认样式，再通过::before伪元素自定义图标或符号；因list-style-image在旧版Safari/IE中支持差，list-style-type选项有限且无法调色、缩放或动画，list-style-position: inside在窄屏换行时易致符号悬空。
直接用 list-style: none 清掉默认样式，再靠 ::before 伪元素加图标或符号——这是最可控、兼容性最好、也最容易响应式适配的列表美化路径。
为什么不能只靠 list-style 属性？
浏览器对 list-style-image 的 SVG 支持不一致，部分旧版 Safari 和 IE 完全不渲染；list-style-type 只能选有限几种（disc、square、upper-roman 等），没法调颜色、大小或加动画；list-style-position: inside 在文字换行时容易导致项目符号悬空，尤其在窄屏下。
这些限制让纯 list-style 方案在真实项目中容易翻车，尤其当你需要统一设计语言、支持深色模式或做交互动效时。
::before 自定义符号的实操要点
必须给 li 加 position: relative，否则 ::before 会相对于 ul 或 ol 定位，导致图标错位。
立即学习“前端免费学习笔记（深入）”；
-
content可填 Unicode 字符（如"✓"、"→"）、SVG data URL（url("data:image/svg+xml,%3Csvg...%3E")）或空字符串（配合背景图） - 用
font-size和line-height控制图标尺寸与垂直居中，比用width/height更稳 - 避免用
margin-left: -1em拉回图标——它在不同字体下表现浮动，推荐用padding-left预留空间 +left: 0固定定位 - 如果列表项是链接（
a标签），记得给a:hover ::before单独设颜色或 transform，否则悬停时图标不变色会显得“没反应”
横向排列列表的 flex 布局避坑点
用 display: flex 替代 inline-block 是主流做法，但几个细节常被忽略：
-
flex-wrap: wrap必须显式声明，否则超宽内容会被强制压缩或溢出容器 - 别用
margin-right分隔项——最后一项会多出空白；改用gap: 12px（现代浏览器全覆盖，IE 不支持需另写 fallback） - 小屏切回竖排时，
flex-direction: column要重置gap值，否则竖向间距可能过大 - 若列表项宽度差异大（比如技能标签长短不一），加
flex: 1 1 auto比固定width更适应内容长度
语义正确性和可访问性容易被跳过的地方
美观不能以牺牲语义为代价。一个常见错误是：把 ul 当作纯装饰容器，里面塞 div 而非 li ——这会让屏幕阅读器无法识别为列表，失去「共 5 项」这类上下文信息。
另一个盲区是焦点管理：可点击的列表项（如导航菜单、技能标签锚点）必须有 :focus-visible 或 :focus 样式，且不能只靠颜色变化（色觉障碍用户不可见），至少加 outline 或 box-shadow。
最后提醒一句：所有自定义图标都该有视觉反馈，哪怕只是 transform: scale(1.05)，否则用户会怀疑它是不是可交互的。
