html - CSS data attribute new line character & pseudo-element content value

Question

Is it possible to have a new line in a data attribute ?

I am trying to do something like this:

CSS:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

HTML

<div data-foo="First line a Second Line">foo</div>

I found that "a" is a new line in CSS, but still does not work for me.

Answer 1

Here is how this can work. You need to modify your data attribute as follows:

<div data-foo='First line &#xa; Second Line'>foo</div>

and the CSS (proof of concept):

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

Fiddle Demo: http://jsfiddle.net/audetwebdesign/cp4RF/

How It Works

Using a does not work, but the equivalent HTML entity does, 
.

According to the CSS2.1 spec, attr(attribute-label) returns a string but the string is not parsed by the CSS processor (I am not sure what this means exactly). I speculate that a must be interpreted by the CSS processor in order for the code to be displayed property.

In contrast, the HTML entity is interpreted by the browser directly (I guess...) so it appears to work.

However, for the line feed to work, you need to set white-space: pre to preserve the white space in the pseudo-element. Note: you may also consider namely pre-wrap, or pre-line depending on the nature of your content.

Reference

Regarding getting the HTML entity code for a linefeed:
http://www.fileformat.info/info/unicode/char/000a/index.htm

Regarding the attr() value for the content property:
http://www.w3.org/TR/CSS2/generate.html#content