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

一尘不染

css

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

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

在示例中，HTML换行符 仅用于可视化 我想要实现的目标：

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

阅读 1009

2020-05-16

共1个答案

一尘不染

该content属性指出：

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

因此，您可以使用：

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

但是，在转义任意字符串时，建议使用\00000a而不是\A，因为任何数字或[a-f]字符后跟新行可能会产生不可预测的结果：

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

2020-05-16