为什么在使用 unicode 时我不能在 :before :after content 之后使用 space

Question

我只是想知道为什么在CSS中使用unicode时我不能输入space 在 unicode 之后：

这是我的测试:

div {font-size:50px;}
div:before, div:after {color:green;}
.a:before {content: 'text-before 22 ';}
.b:before {content: 'text-before • ';}
.c:after {content: ' 22 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 允许在 char 后添加 space。但是当使用 unicode（A 和 C）时 spaces 消失了。

.x:before {content: '22 ';}

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

所以问题是：为什么以及如何在 uncicode 之后添加真正的 space-char（当我们在键盘上按 space-bar 时）？ (不使用边距填充)

Answer 1

space 被用作转义序列的一部分，以防止其他十六进制字符被误解为转义序列的一部分。来自 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:

with a space (or other white space character): " B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character.

by providing exactly 6 hexadecimal digits: "[=14=]0026B" ("&B")

例如，space 有助于区分字符串 '22 ff' 和字符串 '22ff'，这意味着完全不同的东西（我什至不确定它代表一个实际的字符).

要在特殊字符后添加一个space，再添加一个space字符：

.x:before {content: '22  ';}

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

Answer 2

您可以像这样在点之前或之后添加一个 unicode space '[=12=]a0'：

div {font-size:50px;}
div:before, div:after {color:green;}
.a:before {content: 'tex-before 22 [=10=]a0';}
.b:before {content: 'text-before • ';}
.c:after {content: ' 22 [=10=]a0 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>

为什么在使用 unicode 时我不能在 :before :after content 之后使用 space

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

css

unicode

char

css-content