在 ::after 或 ::before 伪元素内容中添加换行符

content 属性指出：

作者可以通过在 'content' 属性之后的字符串之一中写入“\A”转义序列来在生成的内容中包含换行符。这个插入的换行符仍然受制于“空白”属性。有关“\A”转义序列的更多信息，请参阅“字符串”和“字符和大小写”。

所以你可以使用：

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

但是，当转义任意字符串时，建议使用 \00000a 而不是 \A，因为任何数字或 [a-f] 字符后跟新行都可能给出 unpredictable results：

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

---

很好的文章解释了基础知识（但是不包括换行符）。

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

如果您需要有两个内联元素，其中一个插入到另一个元素中的下一行，您可以通过添加伪元素 :after 和 content:'\A' 和空格：pre 来完成此操作

HTML

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

CSS

.label:after {
    content: '\A';
    white-space: pre;
}

---

我必须在工具提示中有新行。我必须在我的 :after 上添加这个 CSS：

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

自动换行似乎是必要的。

此外，\A 在要显示的文本中间不起作用，强制换行。

 
 

工作。然后我能够得到这样的工具提示：

https://i.stack.imgur.com/efIsR.png

---

你可以试试这个

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

Js Fiddle

---

对于将要寻找“如何动态更改伪元素上的内容添加新行号”的人，这里是答案

像 
 这样的 Html 字符无法使用 JavaScript 将它们附加到 html，因为这些字符在文档呈现时发生了更改

相反，您需要找到 U+000D 和 U+000A 这个字符的 unicode 表示，这样我们就可以执行类似的操作

var el = document.querySelector('div'); var string = el.getAttribute('text').replace(/, /, '\u000D\u000A'); el.setAttribute('text', string); div:before{ 内容：attr(text);空白：pre； }

希望这可以节省别人的时间，祝你好运:)

---

为 ::after 或 ::before 伪元素内容添加换行符

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

---

在这里发现了这个似乎问同样问题的问题：Newline character sequence in CSS 'content' property?

看起来您可以使用 \A 或 \00000a 来实现 newline

---

<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

.mbr 和 .dbr 类可以使用 CSS display:table 模拟换行行为。如果你想替换真正的
很有用。

查看这个演示 Codepen：https://codepen.io/Marko36/pen/RBweYY，
和这篇关于响应式网站使用的帖子：Responsive line-breaks: simulate <br /> at given breakpoints。

---