Why I can not use space after on :before :after content when using unicode

Question

I just was wondering why in CSS when using unicode I can not put 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>

---

So you will see B and D using non-unicode is allowed to add space after char. But when using unicode (A and C) spaces is gone.

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

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

So question is : Why and how to add real space-char (as we press space-bar on keyboard) after uncicode ? (Without using margin padding)

Shelburne

One you have used the escape slash to apply unicode it stays escaped so the 'normal' keyboard "space" no longer applies in that string. – Eveland

Answer 1

The space is consumed as part of the escape sequence to prevent other hexadecimal characters from being misinterpreted as part of the escape sequence. From the spec:

If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:

1. with a space (or other white space character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character.
2. by providing exactly 6 hexadecimal digits: "\000026B" ("&B")

For example, the space helps distinguish the string '\2022 ff' from the string '\2022ff', which would mean something entirely different (I'm not even sure it represents an actual character).

To add a space after the special character, add another space character:

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

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

Wagonlit

Answer 2

You can add an unicode space '\00a0' before or after the dot like so:

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>

Benson