Thursday, April 3, 2014

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):

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

#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:

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

#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 sourceCarriage ReturnExample
inline string
content: "line1 \A line2"
.setAttribute('data-extra', " line1 \n line2");
data-attributeinline carriage return
data-extra="line1 &#10; line2"
&#xA; (hex)
data-extra="line1 &#xA; line2"

Here is a full example: