Почему я не могу использовать пробел после on:before:after content при использовании юникода

Question

Мне просто было интересно, почему в CSS при использовании юникода я не могу поставить пробел после юникода:

Это мой тест:

div {font-size:50px;}
div:before, div:after {color:green;}
.a:before {content: 'text-before \2022 ';}
.b:before {content: 'text-before • ';}
.c:after {content: ' \2022 text-after';}
.d:after {content: ' • text-after';}

<div class="a">A-Hello</div>
<div class="b">B-Hello</div>
<div class="c">C-Hello</div>
<div class="d">D-Hello</div>

---

Итак, вы увидите B а также D использование не-Unicode разрешено добавлять пробел после символа. Но при использовании юникода (A а также C) Пространства больше нет.

.x:before {content: '\2022 ';}

<div class="x">Hello</div>

Итак, вопрос: почему и как добавить настоящий пробел (когда мы нажимаем клавишу пробела на клавиатуре) после uncicode? (Без использования отступов)

Answer 1

Пространство используется как часть escape-последовательности, чтобы не допустить неправильного толкования других шестнадцатеричных символов как части escape-последовательности. Из спецификации:

Если символ в диапазоне [0-9a-fA-F] следует за шестнадцатеричным числом, конец номера должен быть четко обозначен. Есть два способа сделать это:

1. с пробелом (или другим символом пробела): "\26 B" ("&B"). В этом случае пользовательские агенты должны рассматривать пару "CR/LF" (U+000D/U+000A) как один символ пробела.
2. предоставляя ровно 6 шестнадцатеричных цифр: "\000026B" ("&B")

Например, пробел помогает различить строку '\2022 ff' из строки '\2022ff', что означало бы что-то совершенно иное (я даже не уверен, что оно представляет реальный характер).

Чтобы добавить пробел после специального символа, добавьте еще один пробел:

.x:before {content: '\2022  ';}

<div class="x">Hello</div>

Answer 2

Вы можете добавить Unicode пробел '\00a0' до или после точки вот так:

div {font-size:50px;}
div:before, div:after {color:green;}
.a:before {content: 'tex-before \2022 \00a0';}
.b:before {content: 'text-before • ';}
.c:after {content: ' \2022 \00a0 text-after';}
.d:after {content: ' • text-after';}

<div class="a">A-Hello</div>
<div class="b">B-Hello</div>
<div class="c">C-Hello</div>
<div class="d">D-Hello</div>