Create Line Breaks in Data Description [duplicate] - css

Question

This question already has answers here:
CSS data attribute new line character & pseudo-element content value
(5 answers)
Closed 9 years ago.
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.

Answer 2

The content attribute won't ever interpret your Html as markup, so you'll need to go about this another way.
One way would be escaping the newline and setting white-space: pre; in your pseudoelement. This value is an abbreviation for 'preserves,' which means the newline will be rendered by the browser.
The Thinking Man,\AThe Artist,\AThe Philosopher
View on JSFiddle
For more on the white-space property, refer to the MDN article on it..
For more on escaping new lines in content, check out the CSS2 specs on strings.