Newline Character Sequence in CSS 'Content' Property

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>

Css force new line in between text in content

You need to add white-space: pre; to your class.

h1:after {
    content: 'Hello\AWorld';
    white-space:pre;
}

Add line break to ::after or ::before pseudo-element content

The content property states:

Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the 'content' property. This inserted line break is still subject to the 'white-space' property. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.

So you can use:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

When escaping arbitrary strings, however, it's advisable to use \00000a instead of \A, because any number or [a-f] character followed by the new line may give unpredictable results:

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

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>

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>

Are these two CSS new line characters the same? \a, \A

Might Yes, these characters represent the generic notion of "newline" in CSS

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 break in HTML with '\n'

This is to show new line and return carriage in HTML, then you don't need to do it explicitly. You can do it in CSS by setting the white-space attribute pre-line value.

<span style="white-space: pre-line">@Model.CommentText</span>

css content character - \A takes more space than br tag

But I see, when I use the css content character - \A, it takes up more
height than a br tag.

It is not taking more height than br tag. The difference is that in your next div in the example, the first br introduces a line break, and then second one introduces another line break.

It renders like this:


Two new lines gonna be there [br causes line break here]
[br causes line break here]

Whereas in the first div the pseudo-element itself starts from the next line and then displays two linebreaks. That is because your #charPrint::after is set to display: block. This will cause it to create its own block starting from the next line. Then it will display two linebreaks based on its content property.

It renders like this:


this is a \A print stuff
[pseudo-element starts here] [\A causes line break here]
[\A causes line break here]

This is why you are seeing an extra break in the first div.

To solve this, just make your ::after pseudo-element inline instead of block, which will make it render like this:


this is a \A print stuff [pseudo-element starts here] [\A causes line break here]
[\A causes line break here]

Fiddle: http://jsfiddle.net/6Lkxr2x6/1/

Snippet:

#charPrint::after{ content: '\A\A'; display: inline; white-space: pre; }

<div id="charPrint">this is a \A print stuff</div><div id="other">Two new lines gonna be there  <br><br></div><div> end of content</div>

How to line-break from css, without using br / ?

Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you.

I suggest using spans that you will then display as blocks (just like a <div> actually).

p span {  display: block;}

<p><span>hello</span><span>How are you</span></p>

Newline Character Sequence in CSS 'Content' Property