Css 在：：after 或：：before 伪元素内容中添加换行符

发布于06月11日

我没有访问网页的HTML或PHP的权限，只能通过CSS进行编辑.我一直在对一个站点进行修改，并通过::after或::before个伪元素添加文本，我发现应该使用转义Unicode来处理添加的内容之前或之后的空格之类的事情.

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

在示例中，HTML break line元素是only to visualize，这是我想要实现的:

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

推荐答案

这content个属性声明:

通过在"content"属性后的一个字符串中写入"\A"转义序列，作者可以在生成的内容中包括换行符.插入的换行符是still subject to the 'white-space' property..有关"\A"转义序列的详细信息，请参阅"字符串"和"字符和大小写".

所以你可以使用:

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

但是，在转义任意字符串时，建议使用\00000a而不是\A，因为新行后面的任何数字或[a-f]字符都可能表示unpredictable results:

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

实用课程推荐