根本原因是css文件编码与浏览器解析预期不一致，需统一为utf-8无bom，并将content中中文转为\xxxx格式（去掉u前缀），同时确保html声明charset="utf-8"及http响应头匹配。
为什么CSS伪元素content显示中文会乱码
根本原因不是浏览器不支持中文，而是CSS解析器对content属性中直接写的中文字符串，依赖文件字节流的编码解释。一旦CSS文件实际保存为ANSI、GBK或UTF-8 with BOM等非标准UTF-8无BOM格式，浏览器就可能把多字节的UTF-8中文序列误读为单字节字符，最终渲染成或方块。
典型现象包括：content: '年';在Chrome里显示为“”，在Safari里变成空白，甚至整个::after失效；而同一段HTML里内联样式或JS动态插入的中文却正常——这说明问题出在CSS文件本身的字节编码与浏览器预期不一致。
CSS文件必须用UTF-8无BOM编码保存
不是“只要选UTF-8就行”，而是必须确认是UTF-8 without BOM。VS Code、Sublime Text、Notepad++等编辑器默认可能带BOM（尤其是Windows下），而CSS规范不识别BOM头，会导致解析器从第1个字节就开始错位。
- 在VS Code中：右下角点击编码名称 → 选
Save with Encoding→ 选UTF-8（注意不是UTF-8 with BOM） - 在终端验证：
file -i style.css应返回charset=utf-8，不含bom字样 - 若已存为BOM格式，用
iconv -f UTF-8 -t UTF-8//IGNORE style.css > style_fixed.css可清除BOM
content里写中文必须转Unicode且去掉u前缀
即使编码正确，content属性对直接中文的支持仍不稳定——尤其在旧版Edge、某些打包工具（如webpack css-loader）或CDN自动压缩场景下。W3C规范只明确定义了\XXXX十六进制转义语法（X为0–9或a–f），不支持\u5e74这种JS风格写法。
- 错误写法：
content: '\u5e74';—— 浏览器会当作字面量\u加未定义字符处理 - 正确写法：
content: '\5e74';—— 去掉u，且每个Unicode码点单独写，不能连写如\5e74\6708 - 推荐工具：用
console.log(escape('年'))得%u5E74，再手动转成\5e74；或用站长工具（tool.chinaz.com/tools/unicode.aspx）转后删u
HTML meta声明和HTTP响应头也要同步
单改CSS还不够。如果HTML页面本身没声明UTF-8，或者服务器返回的Content-Type header是text/css; charset=iso-8859-1，浏览器照样按错误编码加载CSS。
- 确保HTML顶部有：
<meta charset="UTF-8">（HTML5唯一推荐写法） - 检查Network面板 → CSS文件Response Headers → 确认
Content-Type: text/css; charset=utf-8 - 若用Nginx/Apache，需配置
add_header Content-Type "text/css; charset=utf-8";或类似规则
最易被忽略的是：本地双击打开HTML时，浏览器靠文件扩展名和BOM推测编码，此时哪怕CSS文件是UTF-8无BOM，HTML没meta也会失败。开发阶段务必走本地server（如npx serve）而非file://协议。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
