为什么在使用 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 ';}

&lt;div class="x"&gt;Hello&lt;/div&gt;

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

【问题讨论】：

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

标签： css unicode char css-content

【解决方案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  ';}

&lt;div class="x"&gt;Hello&lt;/div&gt;

【讨论】：

【解决方案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>

【讨论】：