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

Question

I add newline characters using either the character \A (or) the break line tag, br

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

Jsfiddle is at, http://jsfiddle.net/6Lkxr2x6/

Doesn't br tag and \A represent a single newline character?

Answer 1

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>