使用CSS内容添加HTML实体
你如何使用CSS content属性添加html实体？
我有一些链接，通过在每个之前添加一个箭头，将其制作成面包屑风格列表。
<div class="breadcrumbs"> <a>One</a> <a>Two</a> <a>Three</a> </div>
其中有以下风格适用于它：
.breadcrumbs a:before { content: '> '; }
问题是，当面包屑列表变长，并换行到下一行时，箭头将保留在前一行。 显而易见的解决scheme是将空间更改为不间断的空间，但这不起作用：
.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是Unicode中 NO-BREAK SPACE字符的十进制代码点 （实际上， UCS-2 ;请参阅HTML 4.01规范）。 该码点的hex表示是U + 00A0（160 = 10×16 1 + 0×16 0 ）。 你会发现，在Unicode 代码图表和字符数据库 。
在CSS中，你需要为这些字符使用Unicode转义序列，这是基于字符代码点的hex值。 所以你需要写
.breadcrumbs a:before { content: '>\a0'; }
只要转义序列的最后一个string值是最后一个string就行了。 如果有字符出现，有两种方法可以避免误解：
a）（由他人提及）使用正好六个hex数字作为转义序列：
.breadcrumbs a:before { content: '>\0000a0foo'; }
b）在转义序列之后添加一个空格（例如空格）字符：
.breadcrumbs a:before { content: '>\a0 foo'; }
（由于f是一个hex数字， \a0f在这里是指GURMUKHI LETTER EE ，或者如果你有一个合适的字体。
分隔的空白将被忽略，并且这将被显示> foo ，其中这里显示的空间将是NO-BREAK SPACE字符。
白空间方法（ '\a0 foo' ）比六位方法（ '\0000a0foo' ）具有以下优点：
- 键入更容易 ，因为前导零不是必需的，数字不需要计数。
- 阅读起来比较容易 ，因为转义序列和后面的文本之间有空白，数字不需要计数。
- 它需要较less的空间 ，因为前导零不是必需的;
- 它是向上兼容的 ，因为将来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 '意味着该空格是hexstring的终止符，并被转义序列吸收。 他进一步指出了这个权威性的描述 ，这听起来像是我下面所描述和解决的问题的一个很好的解决scheme。
你需要做的是使用逃脱的Unicode。 尽pipe你已经被告知\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的build议：
content:'No\00a0Break' /* becomes No਋reak */
它将B转换为hex转义字符。 0-9a-fA-F也是如此。
使用hex代码为非破坏空间。 像这样的东西：
.breadcrumbs a:before { content: '>\00a0'; }
我发现将符号（例如▾（ ▾ ）转换为\25BE ）的最简单方法是使用Microsoft calculator =）
是。 启用程序员模式，打开十进制系统，input9662 ，然后切换到hex，你会得到25BE 。 然后只需在开头添加一个反斜杠\ 。
有一种方法来粘贴一个nbsp – 打开的charmap和复制字符160 。 但是，在这种情况下，我可能会使用填充来填充，如下所示：
.breadcrumbs a:before { content: '>'; padding-right: .5em; }
不过，您可能需要设置面包屑display:inline-block或其他内容。
例如 ：
http://character-code.com/arrows-html-codes.php
例如：如果你想select你的angular色，我select了“＆＃8620”“＆＃x21ac”（我们使用HEX值）
.breadcrumbs a:before { content: '\0021ac'; }
结果：↬
而已 ：）
我知道这是一个很老的post，但如果间隔是你所有的后，为什么不简单：
.breadcrumbs a::before { content: '>'; margin-left: 8px; margin-right: 8px; }
我以前用过这个方法。 在我的testing中，它与其他“>”在其他方面完全一致。
这里有两种方法：
-
在HTML中：
<div class="ics">⛱</div>
这将导致</s>
-
在Css中：
.ics::before {content: \9969;}
用HTML代码<div class="ics"></div>
这也导致了</s>
