为什么在使用 Unicode 时，在 :before 和 :after content 后不能加空格？

Question

我在使用CSS时想知道为什么在使用unicode后无法在其后添加空格：

这是我的测试：

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>

---

你会发现在使用非Unicode字符时，B和D允许在字符后添加空格。但是，在使用Unicode字符（A和C）时，空格消失了。

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

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

所以问题是：为什么以及如何在Unicode之后添加真正的空格字符（就像我们在键盘上按空格键一样）？（不使用margin和padding）

- l2aelba

---

一旦您使用转义斜杠来应用Unicode，它就会保持转义状态，因此在该字符串中不再适用“正常”的键盘“空格”。 - Paulie_D

Answer 1

作为转义序列的一部分，空格会被消耗，以防止其他十六进制字符被错误地解释为转义序列的一部分。根据规范：

如果十六进制数字后面跟着一个在[0-9a-fA-F]范围内的字符，则需要明确数字的结尾。有两种方法可以实现：

1. 使用空格（或其他空格字符）：" \ 26B"（"&B"）。在这种情况下，用户代理应将“CR / LF”对（U + 000D / U + 000A）视为单个空格字符。
2. 提供恰好6个十六进制数字："\ 000026B"（"&B"）

例如，空格有助于区分字符串'\2022 ff'和字符串'\2022ff'，后者代表完全不同的内容（我甚至不确定它是否表示实际字符）。

要在特殊字符后添加空格，请添加另一个空格字符。

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

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

- BoltClock

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>

- Goombah