伪元素中用\A实现换行需配合white-space:pre-wrap等属性，且建议设display:block/inline-block；复杂换行应改用真实HTML元素。
伪元素（如 ::before 和 ::after）的 content 属性本身不直接支持换行，但可以通过组合 white-space 和特殊换行符实现换行效果。
伪元素中用 \A 实现换行
在 content 值中插入转义序列 \A 表示一个换行符，但必须配合 white-space: pre 或 pre-wrap 才能生效：
-
\A是 CSS 中表示“换行”的 Unicode 转义（U+000A），不是普通回车或\n - 仅写
\A不起作用，必须设置white-space以保留该换行符 - 推荐用
white-space: pre-wrap：既保留\A换行，又允许内容在容器边界正常折行
示例：
.box::before {
content: '第一行\A第二行';
white-space: pre-wrap;
display: inline-block;
}
white-space 取值对伪元素换行的影响
white-space 决定了伪元素生成文本中的空格、制表符和换行符是否被保留，以及是否自动折行：
Work Productivity Word Mail Workflow Helper
下载
构建并排查Microsoft Word邮件合并及DOCX模板工作流，使用合并域、内容控件、文档属性、重复区块、数据等
立即学习“前端免费学习笔记（深入）”；
-
normal：忽略所有换行符和多余空格，\A无效 -
nowrap：保留空格但忽略换行，\A显示为空格，不换行 -
pre：保留\A并换行，但不自动折行 —— 超宽内容会溢出 -
pre-wrap：最常用；保留\A换行，同时允许长文本在容器边缘自动折行
其他注意事项
伪元素默认是内联级，若需稳定换行表现，建议显式设置显示类型：
- 加
display: block或inline-block，避免换行被父容器内联流干扰 - 确保伪元素有足够宽度或父容器设了
width，否则pre-wrap的自动折行可能不明显 - 避免在
content中混用 HTML 实体（如
替代方案：用真实元素更可控
如果换行逻辑复杂（比如动态多行、响应式断点控制），伪元素就不太适合。此时建议：
- 改用真实 HTML 元素（如
<span></span>或<div>）承载多行文本 <li>用 <code>white-space: pre-line处理含自然换行符的内容（如服务端注入的带\n的字符串） - 结合
word-break或overflow-wrap应对超长无空格字符串（如 URL）
