Creating line breaks in data descriptions

Question

I have CSS that uses a 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> 

I am having problems, and I would like each part of the proposal to be on the line. In other words

 The Thinking Man The Artist The Philosopher 

But when I insert <br /> , it does not create a gap, it just displays <br /> in the code. How to create line breaks in data description using the following code?

Answer 1

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

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

JSFiddle example .

Unfortunately, you cannot 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 can do to get around this is to use several 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 do not know if this is a useful solution to your problem.

Answer 2

The content attribute will never interpret your HTML as markup, so you will need to do it differently.

One way is to slip away from the new line and set white-space: pre; in your pseudo-element. This value is an abbreviation for "save", which means that a new line will be displayed by the browser.

 The Thinking Man,\AThe Artist,\AThe Philosopher 

View in JSFiddle

For more information about white space properties, see the MDN article on it. .

For more information on escaping newlines in content see the CSS2 specifications in lines .