Newline character sequence in CSS 'content' property? [duplicate]

Answer 1

figcaption:before
{
    content: 'Figure \a' attr(title);
    white-space: pre;
}

Note that in the content attribute value, concatenation is expressed just by whitespace, not by a “+” sign. The escape notation \a in a CSS string literal indicates a linebreak character.

Answer 2

The content property accepts a string and:

A string cannot directly contain a newline. To include a newline in a string, use an escape representing the line feed character in ISO-10646 (U+000A), such as "\A" or "\00000a". This character represents the generic notion of "newline" in CSS.

(No idea about actual browser support.)

You can check Using character escapes in markup and CSS for reference about the escape syntax, which essentially is:

• \20AC must be followed by a space if the next character is one of a-f, A-F, 0-9
• \0020AC must be 6 digits long, no space needed (but can be included)

NOTE: use \00000a rather than just \A when escaping an arbitrary string, because if the newline is followed by a number or any character from [a-f] range, this may give an undesired result.