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

Question

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

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

例如，HTML 换行元素只是为了可视化我想要实现的目标:

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

Answer 1

content属性状态:

Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the 'content' property. This inserted line break is still subject to the 'white-space' property. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.

所以你可以使用:

#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')} }"`;
}