伪元素content中\n不换行，因CSS规范忽略换行符；唯一合法换行是\a转义，且需white-space:pre配合。
伪元素的 content 里写 \n 为什么没换行？
因为 content 中的 \n 不会被解析为换行，而是当作普通空白字符被浏览器忽略——CSS 规范明确要求：伪元素内容中的换行符、制表符等**不参与布局渲染**，只保留空格（且可能被合并）。哪怕你写了 content: "第一行\n第二行";，最终也只会显示成“第一行第二行”。
content 换行必须用 Unicode 转义 \a
唯一能在 content 中触发换行的合法方式是使用 CSS 标准定义的换行转义序列 \a（注意是反斜杠 + 小写 a，不是 \n）。
-
\a是 CSS 的“line feed”转义，仅在content属性中有效，且需配合white-space: pre;或pre-wrap才能生效 - 必须写在双引号字符串内：
content: "第一行\a第二行"; - 父容器或伪元素自身要设
white-space: pre;，否则\a仍被当空白忽略 - 不能用
\n、content里无效
伪元素多行内容的实际可行方案
真要实现多行伪元素内容，靠 content 单独撑开几乎不可靠。更稳的做法是：
- 放弃在
content里塞多行文本，改用多个伪元素：比如::before放第一行，::after放第二行，各自设display: block; - 若必须单伪元素多行，用
content: "第一行\a第二行";+white-space: pre;+display: block;，但要注意父容器不能有overflow: hidden切掉第二行 - 避免对
content做复杂排版——它本质是“插入一个匿名可替换元素”，不是文本容器；需要精细控制换行/缩进，就该用真实 DOM 元素 - Tailwind 用户注意：
before:content-["第一行\a第二行"]在构建时可能因转义问题失败，建议拆成两个修饰符或改用 JS 注入
容易被忽略的兼容性细节
\a 在所有现代 Chrome（≥80）、Firefox、Safari 中都支持，但有两个隐藏坑：
立即学习“前端免费学习笔记（深入）”；
- 如果伪元素父级用了
all: unset;或all: revert;，会把white-space重置掉，导致\a失效 - 某些 CSS 重置库（如 modern-normalize）对
pre类元素设置了font-family: monospace;，而伪元素默认继承不到这个字体，可能造成行高错位——显式加font-family: inherit;更安全 -
content: "x\a y"中的\a后面那个空格会被保留，可能多出意外间隙；建议写成"x\a y"（\a后紧接文字）或用white-space: pre-line;来压缩多余空白
伪元素换行从来不是“写个 \n 就完事”的事，关键在 content 的语义限制和 white-space 的协同生效——漏掉任一环，内容就静默塌陷。
