使用 CSS 内容添加 HTML 实体

您必须使用转义的 unicode ：

喜欢

.breadcrumbs a:before {
  content: '\0000a0';
}

更多信息：http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

---

CSS 不是 HTML。   是 HTML 中命名的 character reference；相当于十进制数字字符引用  。 160 是 Unicode（或 UCS-2；参见 HTML 4.01 Specification）中 NO-BREAK SPACE 字符的十进制 代码点。该代码点的十六进制表示为 U+00A0 (160 = 10 × 16¹ + 0 × 16⁰)。您会在 Unicode Code Charts 和 Character Database 中找到它。

在 CSS 中，您需要对此类字符使用 Unicode 转义序列，该转义序列基于字符代码点的十六进制值。所以你需要写

.breadcrumbs a:before {
  content: '\a0';
}

只要转义序列在字符串值中最后出现，这就会起作用。如果字符跟随，有两种方法可以避免误解：

a）（其他人提到）使用恰好六个十六进制数字作为转义序列：

.breadcrumbs a:before {
  content: '\0000a0foo';
}

b) 在转义序列后添加一个空白（例如空格）字符：

.breadcrumbs a:before {
  content: '\a0 foo';
}

（因为 f 是一个十六进制数字，所以 \a0f 在这里表示 GURMUKHI LETTER EE，如果您有合适的字体，则表示 ਏ。）

分隔的空格将被忽略，这将显示为  foo，此处显示的空格将是一个 NO-BREAK SPACE 字符。

与六位数方法 ('\0000a0foo') 相比，空白方法 ('\a0 foo') 具有以下优势：

打字更容易，因为不需要前导零，也不需要计算数字；

它更容易阅读，因为转义序列和后面的文本之间有空格，并且不需要计算数字；

它需要更少的空间，因为不需要前导零；

它是向上兼容的，因为将来支持 U+10FFFF 的 Unicode 代码点需要修改 CSS 规范。

因此，要在转义字符后显示一个空格，请在样式表中使用两个空格 -

.breadcrumbs a:before {
  content: '\a0  foo';
}

– 或明确表示：

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

有关详细信息，请参阅 CSS 2.1, section "4.1.3 Characters and case"。

---

更新：PointedEars 提到，在所有 css 情况下，  的正确代表是
'\a0 ' 暗示空格是十六进制字符串的终止符并被转义序列吸收.他进一步指出这个 authoritative description 听起来像是我在下面描述和修复的问题的一个很好的解决方案。

您需要做的是使用转义的 unicode。尽管有人告诉您 \00a0 在 CSS 中并不是   的完美替代品；所以试试：

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

具体使用 \0000a0 作为  。如果您按照 mathieu 和 millikin 的建议尝试：

content:'No\00a0Break'   /* becomes No਋reak */

它将 B 带入十六进制转义字符。 0-9a-fA-F 也是如此。

---

在 CSS 中，您需要使用 Unicode 转义序列来代替 HTML 实体。这是基于字符的十六进制值。

我发现将符号转换为十六进制等价物的最简单方法是，例如从▾ (▾) 到 \25BE 是使用 Microsoft 计算器 =)

是的。启用程序员模式，打开十进制，输入9662，然后切换到十六进制，你会得到25BE。然后只需在开头添加一个反斜杠 \。

---

使用十六进制代码作为不间断空格。像这样的东西：

.breadcrumbs a:before {
  content: '>\00a0';
}

---

有一种粘贴 nbsp 的方法 - 打开 CharMap 并复制 字符 160。但是，在这种情况下，我可能会用填充将其隔开，如下所示：

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

不过，您可能需要设置面包屑 display:inline-block 或其他内容。

---

例如 ：

http://character-code.com/arrows-html-codes.php

示例：如果您想选择您的角色，我选择了“↬”“↬”（我们使用 HEX 值）

.breadcrumbs a:before {
  content: '\0021ac';
}

结果：↬

而已 ：）

---

我知道这是一篇很老的帖子，但如果间距是你所追求的，为什么不简单地：

.breadcrumbs a::before {
  content: '>';
  margin-left: 8px;
  margin-right: 8px;
}

我以前用过这种方法。在我的测试中，它可以完美地包裹在其他行中，并带有“>”。

---

这里有两种方法：

在 HTML 中：

这将导致⛱

在 Css 中： .ics::before {content: "\9969;"}

带有 HTML 代码 <div class="ics"></div>

这也导致⛱

---