Create Line Breaks in Data Description

Question

I have CSS that is using Data Description to display text on a page.

Code:

CSS

#nav a:after { 
      text-align:center; 
      content: attr(data-description); 
      display: block;
}

HTML

<li><a data-description="The Thinking Man,The Artist, The Philosopher"  href="#">The Renaissance Man</a></li>

What I am having trouble with and would I would like to do is to have each part of the sentence on its on line. In other words

The Thinking Man
The Artist
The Philosopher 

But when I insert a <br /> it doesn't creat a break it just displays <br /> in the code. How would I create line breaks in a data description using the following code?

Answer 1

You can add a new line by combining \A with white-space:pre-wrap;, for example:

p:after {
    content:"Line 1\ALine 2";
    white-space:pre-wrap;
}

/* Line 1
 * Line 2 */

JSFiddle example.

Unfortunately it doesn't seem you can do this using attr().

<p data-description="Line 1\ALine 2"></p>

p:after {
    content:attr(data-description);
    white-space:pre-wrap;
}

/* Line 1\ALine 2 */

JSFiddle example.

What you could do to get around this is to use multiple data-* attributes:

<p data-description1="Line 1" data-description2="Line 2"></p>

p:after {
    content:attr(data-description1) "\A" attr(data-description2);
    white-space:pre-wrap;
}

/* Line 1
 * Line 2 */

JSFiddle example.

I don't know if this is a usable solution to your problem, however.