::before的content属性仅支持字符串、unicode转义（如2713）和图片url，不解析html或css类名；空字符串content: “”仍会生成占位节点，应用content: none彻底移除；伪元素图标无无障碍支持，需用真实标签或aria属性补充语义。
content里只能用字符串、Unicode或图片URL，不能写HTML标签
伪元素::before的content属性天生不支持HTML解析，哪怕你写content: "<i>✓</i>"，浏览器也只会原样显示那几个字符，不会渲染成斜体对勾。它只认三类值：纯字符串（带引号）、Unicode转义（如2713）、或url()引用的图片。
常见错误是试图用content注入图标字体类名（比如content: "icon-check"），指望CSS类自动生效——这完全无效，因为::before生成的内容是匿名文本节点，不参与样式类匹配。
- 要用图标字体（如Font Awesome），得在
::before里直接写Unicode码点，例如content: "f00c"，并确保父元素已声明font-family: "Font Awesome 5 Free"和font-weight: 900 - 用系统emoji更简单：
content: "✅"，但要注意ios/android/windows渲染效果不一致 - 想控制尺寸或颜色？别动
content本身，而是给::before设font-size、color、display: inline-block等样式
content为空字符串时仍会触发渲染，可能意外占位
写content: ""看似“没内容”，但浏览器仍会创建一个空的匿名文本节点，并默认按display: inline参与布局。如果父元素行高大、字体大，或设置了vertical-align: baseline，这个空节点就可能把行高撑开，导致上下元素错位。
典型场景：表单里给input加::before做装饰，结果输入框整体下移了几像素，排查半天发现是空content在作怪。
立即学习“前端免费学习笔记（深入）”；
- 真不需要内容又想保留伪元素钩子？用
content: none（注意不是""）——它彻底移除生成节点，不占任何布局空间 - 调试时可临时加
background: pink到::before，一眼看出是否意外占位 - 若必须用
content: ""（比如后续js要动态改），记得补上line-height: 0; font-size: 0;压平影响
伪元素图标无法被屏幕阅读器识别，无障碍需额外处理
::before生成的内容默认不进入dom树的可访问性API，视障用户用读屏软件根本听不到那个小图标代表什么。比如用content: "2713"表示“成功”，读屏器只会跳过，或只读出“空白”。
这不是“加个aria-label就能解决”的问题——伪元素本身不可访问，父元素的aria-label也不会自动关联到它。
- 图标有语义？直接用真实
<i></i>或<span></span>标签替代::before，再配aria-hidden="true"隐藏装饰性图标 - 非要保留伪元素？在父元素加
aria-label或aria-describedby，明确描述状态，例如aria-label="操作成功" - 纯装饰图标（如分隔线小圆点）加
aria-hidden="true"即可，避免干扰
content里的Unicode要小心编码和字体支持
写content: "e900"这种私有区编码，看着像图标，实际依赖字体文件是否真包含该码位。不同字体、不同系统预装字体集差异很大，一个在Mac上显示正常的箭头，在linux服务器渲染的PDF里可能变成方块。
更隐蔽的问题是源文件编码：如果CSS文件保存为GBK而非UTF-8，而你写了content: "→"这样的UTF-8字符，部分老浏览器会乱码。
- 优先用标准Unicode（如
2192代替→），兼容性更好 - 图标字体务必检查其文档提供的正确码位，别凭感觉猜；Font Awesome v6已弃用私有区，改用SVG或
data-*属性方案 - 部署前用
curl -I确认CSS响应头含Content-Type: text/css; charset=utf-8
真正麻烦的是那些“看起来正常，上线后某台机器上突然变问号”的情况——往往卡在字体链、编码、或CDN缓存了旧版CSS文件，得一层层抠。