CSS content属性中唯一有效的换行转义是\A（大写A），而非\n；必须配合white-space: pre-wrap等支持换行的值才能生效，且需确保字体、字号及浏览器兼容性。
content属性里的\n根本不会被解析为换行
你在content里写"line1\nline2"，浏览器会原样输出line1\nline2五个字符，而不是两行文本。因为CSS的content值不经过HTML解析器，\n只是普通字符串字面量，不是控制符。
真正能触发换行的只有CSS定义的转义序列：\A（注意是大写A，不是小写n）。它等价于U+000A LINE FEED，是content唯一认的换行转义。
-
content: "line1\Aline2";✅ 有效换行 -
content: "line1\nline2";❌ 渲染为字面量 -
content: "line1 line2";❌ HTML实体在CSS中完全无效
white-space没配对，\A也白搭
就算用了\A，如果容器的white-space是默认的normal，换行符仍会被合并或忽略。必须显式启用换行感知能力：
-
white-space: pre;—— 保留\A和所有空格，但不自动折行（可能溢出） -
white-space: pre-wrap;—— 推荐：保留\A，同时允许在容器边界处正常折行 -
white-space: normal;——\A会被当空白合并，等同于空格
漏掉这一步，\A就等于没写。
字体缺失导致\A渲染成方块或空白
\A本身不占视觉空间，但它依赖父元素的行高、字体度量和基线对齐。如果伪元素所在上下文font-size为0、line-height过小，或继承了无换行支持的字体（如某些图标字体），\A可能被压缩到不可见，甚至让整行内容错位。
- 确保伪元素有明确的
font-size（不能依赖继承为0） - 避免在
font-size: 0的父容器里直接用\A，除非子元素已重置字号 - 不要给伪元素设
font-family: "icon-font"——这类字体通常没有行间空白语义
IE8/9根本不支持\A转义
旧版IE（≤9）压根不识别\A，会直接忽略整个content声明，导致伪元素内容消失。这不是bug，是规范缺失。
若需兼容，只能放弃content内换行，改用真实DOM节点或JS注入<br>；现代项目则应确认目标环境最低版本，避免在content里塞复杂排版逻辑。
真正容易被忽略的是：\A不是“插入换行”，而是“插入一个被white-space规则解释的换行控制符”——它和HTML的
不在同一层，也不能靠font-size调大来“看到”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
