New line character added to HTML attribute via jQuery doesn't work for CSS generated content

Question

If I write my new line character 
 directly as HTML attribute, then it can work for CSS generated content. For example:

div::after {
    content: attr(data-generated-content);
    white-space: pre;
    }

<div data-generated-content="First line&#xa;Second line"></div>

However, if the new line character was added via jQuery, then it doesn't work. For example:

$(document).ready(function() {
	$('div').attr('data-generated-content', 'First line&#xa;Second line');
});

div::after {
    content: attr(data-generated-content);
    white-space: pre;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div></div>

Here is a complete demo on jsFiddle.

How do I make the new line character added via jQuery work for CSS generated content?

Luthando Ntsekwa · Accepted Answer · 2015-08-19 05:27:14Z

2

Use javascript \n instead, here is a demo:

$(document).ready(function() {
	$('div').attr('data-generated-content', 'First line\nSecond line');
});

div::after {
    content: attr(data-generated-content);
    white-space: pre;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div></div>

answered Aug 19, 2015 at 5:27

Luthando Ntsekwa

4,2486 gold badges25 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

@IanY. i'm glad i could help