伪元素::before必须声明content属性，否则不渲染；需结合display、position等控制布局，并注意可访问性与兼容性。
不写 content，::before 什么都不会渲染
这是最常踩的坑：只写了样式，漏掉 content，结果图标完全不出现。浏览器直接忽略整个伪元素声明，连盒模型都不生成。哪怕只是插入一个空格或小圆点，也必须显式写上 content: "" 或 content: "•"。
常见错误现象：li::before { background: #007acc; width: 8px; height: 8px; } —— 没有 content，啥也看不到。
-
content: ""用于纯图形（如背景色小圆点、SVG 图标） -
content: "\2713"插入 Unicode 字符（✔），注意用反斜杠转义 -
content: url("data:image/svg+xml,...")嵌入内联 SVG，兼容性好，无字体加载依赖 - 别用
content: none或留空——等同于禁用伪元素
图标位置歪了？检查 position: relative 和 display
::before 默认是 inline 元素，不能设宽高，也很难对齐文字基线。想精确控制位置或尺寸，必须改 display；想用 absolute 定位，父级 li 必须有 position: relative，否则它会相对于 body 或最近定位祖先飘走。
- 简单右对齐图标（如箭头）：
li { display: flex; align-items: center; } li::before { margin-right: 8px; } - 左对齐装饰点（需精确定位）：
li { position: relative; padding-left: 24px; } li::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; } - 用
vertical-align: middle对齐文字时，display必须是inline-block，否则无效
用 SVG 还是字体图标？看项目是否已引入字体库
字体图标（如 Font Awesome）缩放清晰、语义明确，但强依赖字体文件加载完成；内联 SVG 不依赖外部资源，兼容性更稳，适合轻量装饰。
- 用 Font Awesome：
content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;—— 必须确保字体已正确引入，否则显示为方块 - 用内联 SVG：
content: url("data:image/svg+xml,%3Csvg...%3E");—— URL 需编码，推荐用在线工具生成；优势是零请求、无 FOUC - 用 Unicode 字符（如
\2714）最轻量，但样式控制弱，颜色/大小受限于字体渲染
列表默认符号没消失？list-style: none 必须加在 ul 或 ol 上
如果忘了清掉原生圆点或数字，自定义图标会和默认符号重叠，尤其在 Safari 和旧版 Edge 中表现混乱。
- 全局清除：
ul, ol { list-style: none; } - 局部清除（推荐）：
.custom-list { list-style: none; } .custom-list li::before { ... } - 别只给
li设list-style: none—— 无效，该属性只作用于ul/ol - 清除后若发现行高异常，检查是否误删了
padding-left，可手动补上
真正容易被忽略的是可访问性边界：伪元素内容不会被屏幕阅读器读取，所以“必填”“错误”“新”这类带语义的标识，不能只靠 ::before 实现。视觉增强可以放手用，关键信息还得靠 HTML 层的 aria-label 或真实文本支撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
