为啥在使用 unicode 时我不能在 :before :after 内容之后使用空格

Posted 2023-02-25

【中文标题】为啥在使用 unicode 时我不能在 :before :after 内容之后使用空格

【英文标题】：Why I can not use space after on :before :after content when using unicode为什么在使用 unicode 时我不能在 :before :after 内容之后使用空格

【发布时间】：2017-04-13 09:16:15

【问题描述】：

我只是想知道为什么在 CSS 中使用 unicode 我不能把 space after 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>

---

所以你会看到B 和D 使用非unicode 被允许在char 之后添加空格。但是当使用 unicode（A 和 C）时，空格消失了。

.x:before content: '\2022 ';

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

所以问题是：为什么以及如何在 uncicode 之后添加真正的空格字符（当我们按键盘上的空格键时）？（不使用边距填充）

【问题讨论】：

您使用转义斜杠应用 unicode 保持转义，因此“普通”键盘“空格”不再适用于该字符串。

【参考方案1】：

空间被用作转义序列的一部分，以防止其他十六进制字符被误解为转义序列的一部分。来自spec：

如果 [0-9a-fA-F] 范围内的字符跟在 16 进制数后面，则需要明确数字的结尾。有两种方法可以做到这一点：

带有空格（或其他空白字符）：“\26 B”（“&B”）。在这种情况下，用户代理应将“CR/LF”对 (U+000D/U+000A) 视为单个空白字符。 通过提供正好 6 个十六进制数字：“\000026B”（“&B”）

例如，空格有助于区分字符串 '\2022 ff' 和字符串 '\2022ff'，这意味着完全不同的东西（我什至不确定它是否代表实际字符）。

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

.x:before content: '\2022  ';

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

【参考方案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>