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

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

Here is a full example: