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?

no `
` is an element with its own default styling (per browser , except if some normaisation css is being used) and does NOT represent the same new line a plain `"\n"` character would represent in xml/html — Nikos M., Dec 03 '15 at 08:09

score 4 · Accepted Answer · answered Dec 03 '15 at 08:29

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>

score 2 · Answer 2 · edited May 23 '17 at 10:27

2

If you want \A to behave like a <br> tag, you'll need to set it like this...

#example {
    display:inline;
}
#example:after {
    content:"\a";
    white-space: pre;
}

More details in this StackOver flow question.

edited May 23 '17 at 10:27

Community

1
1

answered Dec 03 '15 at 08:09

god_is_love

571
5
18

score 1 · Answer 3 · answered Dec 03 '15 at 08:31

#charPrint::after{
  content: '\A\A';
  white-space: pre;
  display: block; /* THIS LINE */
}

You are adding a new block with 2 linebreakes. First linebreak is already on the new line, so tou get 2 empty lines.

<br><br>

And here you have no the pecial block, and the first linebreak is at the end of text line and the second is on its own. There is only one empty line.

In the first example you need to remove display:block: http://jsfiddle.net/6Lkxr2x6/2/

score 0 · Answer 4 · answered Dec 03 '15 at 08:23

0

It works like this:

h4 {
    display:inline;
}
h4:after {
    content:"\a";
    white-space: pre;
}

Just check with this jsfiddle : Check Once

answered Dec 03 '15 at 08:23

Rahul_Y13

109
1
7

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

4 Answers4