使用CSS内容添加HTML实体

如何使用CSS content属性添加HTML实体？

使用这样的东西只会打印 到屏幕上，而不是不间断的空间：

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

您必须使用转义的unicode：

喜欢

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

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

CSS不是HTML。  是HTML中的命名字符引用；等效于十进制数字字符引用 。160是十进制码点的的NO-BREAK SPACE在字符的Unicode（或UCS-2 ;见HTML 4.01规范）。该代码点的十六进制表示形式是U + 00A0（160 = 10×16 ¹ + 0×16 ⁰）。您将在Unicode 代码表和字符数据库中找到该代码。

在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字符。

'\a0 foo'与六位数方法（'\0000a0foo'）相比，空白方法（）具有以下优点：

• 它是更容易输入，因为前导零是没有必要的，而且并不需要数字来计算;
• 它是更容易阅读，因为转义序列与下面的文本之间的空白，并且不需要数字来计算;
• 它需要较少的空间，因为不需要前导零；
• 它是向上兼容的，因为将来Unicode支持的代码点超出U + 10FFFF时，将需要修改CSS规范。

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

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

–或明确：

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

有关详细信息，请参见CSS 2.1的“ 4.1.3字符和大小写”部分。

更新：PointedEars提到 在所有css情况下正确的替代立场将
'\a0 '意味着该空间是十六进制字符串的终止符，并被转义序列吸收。他进一步指出了这一权威性的描述，这似乎是我在下面描述并解决的问题的一个很好的解决方案。

您需要做的是使用转义的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

示例：如果要选择您的字符，我选择了“＆＃8620”“＆＃x21ac”（我们使用十六进制值）

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

结果：↬

而已 ：）

我知道这是一篇很老的文章，但是如果您要花很多时间，为什么不简单：

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

我以前用过这种方法。在我的测试中，它的旁边用“>”包裹到其他行上。

有两种方法：

• 在HTML中：

  <div class="ics">&#9969;</div>

这将导致⛱

• 在CSS中：

  .ics::before {content: "\9969;"}

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

这也导致⛱