символ содержимого css - \ A занимает больше места, чем тег br

Но я вижу, что когда я использую символ содержимого css - \ A, он занимает большую высоту, чем тег br.

Он не занимает больше высоты, чем тег br. Разница в том, что в следующем div в примере первый br вводит разрыв строки, а затем второй вводит другой разрыв строки.

Это выглядит так:

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

Тогда как в первом div сам псевдоэлемент начинается со следующей строки и затем отображает два разрыва строки. Это потому, что ваш #charPrint::after установлен на display: block. Это заставит его создать свой собственный блок, начиная со следующей строки. Затем он отобразит два разрыва строки в зависимости от своего свойства content.

Это выглядит так:

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

Вот почему вы видите дополнительный перерыв в первом div.

Чтобы решить эту проблему, просто создайте свой псевдоэлемент ::after inline вместо block, что сделает его рендерингом следующим образом:

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/

Фрагмент:

#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>

Если вы хотите, чтобы \A вел себя как тег <br>, вам нужно установить его так ...

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

Подробнее см. в этом вопросе о потоке StackOver.

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

Вы добавляете новый блок с двумя разрывами строки. Первый разрыв строки уже находится на новой строке, поэтому вы получите 2 пустые строки.

<br><br>

И здесь у вас нет специального блока, и первый разрыв строки находится в конце текстовой строки, а второй - сам по себе. Есть только одна пустая строка.

В первом примере вам нужно удалить display:block: http://jsfiddle.net/6Lkxr2x6/2/

Это работает так:

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

Просто проверьте с помощью этого jsfiddle: Проверить один раз