Newline character sequence in CSS 'content' property?
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.
The tricky bit is to remember that HTML collapses white-space by default.
figure {
/* Avoid whitespace collapse to illustrate what works and what doesn't */
white-space: pre-wrap;
}
#first figcaption:before
{
/* \n is not a valid entity in this context */
content: 'Figure \n Chemistry';
display: block;
}
#second figcaption:before
{
content: 'Figure \A Chemistry';
display: block;
}
<figure id='first'>
<figcaption>Experiments</figcaption>
</figure>
<figure id='second'>
<figcaption>Experiments</figcaption>
</figure>
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.
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.