Methods to add multi-line CSS content

I'm sure most of you know that you can add content before or after an element using css; And you can add a line break within that content (spec):

HTML

<div id="test1">Hello World</div>

CSS

#test1:after {
    content : ' of foo \A barred';
    white-space: pre; /* this line is essential */
}

Sadly, this same method doesn't work if you get your content from an attribute:

HTML

<div id="test1" data-extra=" of bar \A food">Hello World</div>

CSS

#test1:after {
    content : attr(data-extra);
    white-space: pre;
}

Example: So after some discussion with the developers of Firefox, I learned that the following alternatives do work; make sure to set the css white-space to pre.

I was hoping that these methods would work consistently and I wouldn't have to remember, so I made this blog post to remind me :)

Here is a condensed list:

content source	Carriage Return	Example
inline string	\A	content: "line1 \A line2"
javascript	\n	.setAttribute('data-extra', " line1 \n line2");
data-attribute	inline carriage return	data-extra="line1 line2"
	
	data-extra="line1 
 line2"
	
 (hex)	data-extra="line1 
 line2"

Here is a full example: