伪元素中::before和::after的\A换行不生效，因默认display: inline且inline元素忽略\A；需设display: block/inline-block并配white-space: pre/pre-line才生效。
伪元素里的 ::before 和 ::after 为什么换行不生效
因为伪元素默认是 display: inline，而 \A（Unicode 换行符）在 inline 元素里被浏览器忽略——不是你写错了，是 CSS 规范就这么定的。
常见错误现象：content: "foo\Abar"; 渲染出来还是 “foobar” 挤在同一行；用 white-space: pre 也不顶用，除非同时改 display。
- 必须把伪元素设为
display: block或display: inline-block才能让\A起作用 -
white-space: pre或pre-line是配套必需项，否则换行符仍被折叠 - 如果父容器是 flex 或 grid，
display: block可能破坏布局流，这时优先试inline-block
content 中的 \A 和真实换行符的区别
写成 content: "a\nb"（用反斜杠+n）完全无效——CSS 字符串不解析 JS/HTML 风格的转义，只认 Unicode 码点 \A（即 U+000A）。
使用场景：想在图标后加一行说明文字、按钮上动态叠加角标并换行、表单 label 旁插入带换行的提示。
立即学习“前端免费学习笔记（深入）”；
-
\A是唯一被 CSScontent属性识别的换行码，\n、 - 多个
\A会变成多个空行，但受line-height和父元素margin影响，视觉间距未必等距 - IE 不支持
\A，如果还要兼容 IE，得用额外标签或 JS 注入
用 display: block 后布局错位怎么办
伪元素变块级后，默认独占一行，容易把后续内容往下顶——这不是 bug，是块级元素的自然行为。
性能影响几乎为零，但兼容性要注意：老 Android Webview 对 display: inline-block + \A 支持不稳定，建议降级为 block 并微调 position。
- 加
position: absolute可脱离文档流，但需确保父元素position: relative - 用
transform: translateY()往上拉，比负 margin 更安全（不触发重排） - 如果只是想“视觉换行”，有时用
br标签或调整父元素flex-direction: column更直接
