CSS Data Attribute New Line Character & Pseudo-Element Content Value

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

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

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

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

CSS pseudo-element content value with line-break via attr inserted by Javascript

Use a plain newline character (\n in your JavaScript string), fix the getElementById() call (get rid of "#"), and add white-space: pre-wrap; to the CSS.

const ele = document.getElementById('my-ele')ele.classList.add('loading');ele.setAttribute('loading-text', 'Your file is being generated...\nThis may take some minutes');

.loading::after {  white-space: pre-wrap;  content: attr(loading-text);}

<div id="my-ele"></div>

Newlines from attribute text in pseudo element's content

When using HTML you need to consider for a new line instead of \A that is used with CSS. You need to also add white-space:pre

span:after {  content: attr(data-usertext);  white-space:pre;}

<span data-usertext="Some random text with 
 some newlines"></span>

Line breaks in CSS pseudo elements using attribute selector

If you are using \A or \a or anything similar as a value to your HTML attribute is just a static value. Using something like following in your CSS will not parse such syntax for your content property

<div data-stuff="Hello \a World"></div>

And CSS like

content: attr(title); 
/* 
   This will not parse \a as a line break and would rather treat it as 
   a string.
*/

If you want to add line breaks from CSS, you need to declare \A in your stylesheet and not the HTML attribute. Hence, something like

content: attr(title) '\A World'; /* works now, as your \A will be parsed by CSS */

Newline character sequence in CSS 'content' property?

The content property accepts a string and:

A string cannot directly contain a newline. To include a newline in a
string, use an escape representing the line feed character in
ISO-10646 (U+000A), such as "\A" or "\00000a". This character
represents the generic notion of "newline" in CSS.

The tricky bit is to remember that HTML collapses white-space by default.

figure {
    /* Avoid whitespace collapse to illustrate what works and what doesn't */
    white-space: pre-wrap;
}

#first figcaption:before
{
    /* \n is not a valid entity in this context */
    content: 'Figure \n Chemistry';
    display: block;  
}

#second figcaption:before
{
    content: 'Figure \A Chemistry';
    display: block;  
}

<figure id='first'>
    <figcaption>Experiments</figcaption>
</figure>

<figure id='second'>
    <figcaption>Experiments</figcaption>
</figure>

Create Line Breaks in Data Description

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.

Insert new line in pseudo element's content using jQuery data-attributes

Try this:

var toolTipText = "Line 1. 
 Line 2";
$(element).attr("data-tooltip", $.parseHTML(toolTipText)[0].data)

jQuery.parseHTML uses native methods to convert the string to a set of
DOM nodes, which can then be inserted into the document.

Multiple content: attr() values

To concatenate two or more string values in CSS, separate them with whitespace:

.element:before {
    content: attr(class) ' ' attr(data-size);
}

Note that the whitespace between the attr() functions and the quotes is not the same as the whitespace within the quotes. The latter is an actual string containing a space character, which will separate the two attribute values in the output. The whitespace between the three parts is the operator that joins them together.

CSS Data Attribute New Line Character & Pseudo-Element Content Value