Why can't I use space after: before: after content when using unicode

Question

I'm just wondering why in CSS when using unicode I cannot put a space after unicode:

This is my test:

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>

Run code

---

So you will see Band Dusing non-unicode to add a space after the char. But when using unicode ( Aand C) spaces disappeared.

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

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

Run code

So the question is: Why and how to add real space - char (when we press the space bar on the keyboard) after uncicode? (without indenting the field)

Answer 1

escape- escape-. spec:

[0-9a-fA-F] , . :

• ( ): "\ 26 B" ( "& B" ). "CR/LF" (U + 000D/U + 000A) .
• 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>