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

Question

我无法访问页面的HTML或PHP,只能通过CSS进行编辑.我一直在对网站进行修改并通过::after或者::before伪元素添加文本,并且发现转义Unicode应该用于诸如添加内容之前或之后的空格之类的东西.

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

在示例中,HTML break行元素仅用于显示我想要实现的内容:

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

Answer 1

该content物业状态:

作者可以通过在"content"属性之后的一个字符串中写入"\ A"转义序列,在生成的内容中包含换行符.此插入的换行符仍受"空白"属性的约束.有关"\ A"转义序列的更多信息,请参见"字符串"和"字符和大小写".

所以你可以使用:

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

Answer 2

不错的文章解释了基础知识(但不包括换行符).

如果你需要有两个内联元素,其中一个元素突破另一个元素中的下一行,你可以通过添加一个伪元素来实现这一点:after with 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;
}

Answer 3

我必须在工具提示中添加新行.我不得不在我的上面添加这个CSS:之后:

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

自动换行似乎是必要的.

另外,\ A在文本中间没有工作显示,强制换行.

 &#13;&#10;

工作.然后我就能得到这样一个工具提示:

Answer 4

你可以试试这个

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

Answer 5

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

像HTML字符一样的HTML字符
将无法使用JavaScript将其附加到html，因为这些字符在文档呈现器上已更改

相反，您需要找到此字符的unicode表示形式，即U + 000D和U + 000A，因此我们可以执行以下操作

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);

div:before{
   content: attr(text);
   white-space: pre;
}

<div text='I want to break it in javascript, after comma sign'></div>

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