将换行符添加到:: after或::之前的伪元素内容

我无法访问页面的HTML或PHP，只能通过CSS进行编辑。我一直在网站上进行修改，并通过::after或::before伪元素添加文本，并发现转义Unicode应该用于添加内容之前或之后的空间。

如何在content属性中添加多行？

在例子中，HTML break line元素只是为了实现我想要实现的function：

 #headerAgentInfoDetailsPhone::after { content: 'Office: XXXXX <br /> Mobile: YYYYY '; }

content属性状态：

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

所以你可以使用：

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

不错的文章解释你想要的东西

在两个内联元素之间添加换行符

如果你需要两个内联元素，其中一个元素插入另一个元素的下一行，你可以通过添加一个伪元素来实现：在content之后：'\ A'和white-space：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; }

你可以试试这个

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

Js小提琴

我必须在工具提示中有新的行。我不得不添加这个CSS在我之后：

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

单词包装似乎是必要的。

另外，“A”没有在文字中间显示，强制换行。

  &#13;&#10;

工作。那时候我能够得到这样一个工具提示：

在这里输入图像描述

在这里发现这个问题，似乎要求同样的事情：在CSS“内容”属性换行字符序列？

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