将换行符添加到：before或：after伪元素内容 [英] Add line break to :before or :after pseudo-element content

问题描述

因为我无法访问某个网页的html / php，并且只能通过CSS添加，

because I do not have access to the html/php for a page and can only add via CSS,

我一直在网站上进行修改，文本通过：before /：after，并且发现escape unicode应该用于诸如添加内容之前或之后的空格。

I've been doing modifications on a site and adding text via the :before/:after and have found that escape unicode should be used for things such as a space before or after the added content.

我试图找到

我将如何解决这个问题？

How would I go about this?

这是我想要实现的一个例子：

This is an example of what I would like to achieve:

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

（当然换行符无效）

推荐答案

content 属性：

作者可以在生成的内容中包括换行符\A转义序列在content属性之后的字符串之一。 有关\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/

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