在伪元素内容的:: after或:: before之前添加换行符 [英] Add line break to ::after or ::before pseudo-element content

问题描述

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

I do not have access to the HTML or PHP for a page and can only edit via CSS. I've been doing modifications on a site and adding text via the ::after or ::before pseudo-elements and have found that escape Unicode should be used for things such as a space before or after the added content.

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

How do I add multiple lines in the content property?

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

In example the HTML break line element is only to visualize what I would like to achieve:

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

推荐答案

content 属性状态:

The content property states:

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

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]字符后跟新行都可能使

When escaping arbitrary strings, however, it's advisable to use \00000a instead of \A, because any number or [a-f] character followed by the new line may give unpredictable results:

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

这篇关于在伪元素内容的:: after或:: before之前添加换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！