伪元素中::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 旁插入带换行的提示。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

立即学习“前端免费学习笔记（深入）”；

• \A 是唯一被 CSS content 属性识别的换行码，\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 更直接

伪元素换行真正卡住人的地方，往往不是语法，而是 display 类型和 white-space 的组合没配对，或者下意识用了 \n。实际项目里，多看一眼 computed styles 里的 display 和 white-space 值，比反复改 content 快得多。