css - 为什么我不能在 :before :after content when using unicode 之后使用空间

Question

我只是想知道为什么在 CSS 中使用 unicode 时我不能将 space 放在 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 之后添加真正的空格字符(当我们在键盘上按空格键时)？(不使用边距填充)

Answer 1

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

例如，空格有助于区分字符串 '\2022 ff' 和字符串 '\2022ff'，这意味着完全不同的东西(我不是甚至确定它代表一个真实的 Angular 色)。

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

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

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