在CSS的内容属性中放置Unicode字符

Question

在CSS的内容属性中放置Unicode字符

391

我有一个问题。我已经找到向下箭头的HTML代码，↓ (↓)。

很棒。现在我需要在CSS中使用它，就像这样：

nav a:hover {content:"&darr";}

显然这行不通，因为 ↓ 是一个 HTML 符号。关于 CSS 中使用的这些“转义 Unicode”符号似乎没有太多信息。我发现了其他一些符号，比如\2020，但没有箭头。箭头代码是什么？

- davecave

14

content属性需要使用:before或:after来生效。 - Musa

2

一个简单的谷歌搜索揭示了http://www.blooberry.com/indexdot/html/tagpages/entities/arrow.htm，其中列出了许多箭头的Unicode代码点。 - Phrogz

2

@Phrogz 很不幸，那个网站的Unicode中没有“/”，所以通常我不会知道我必须在代码中添加“/”才能使它在CSS中工作。现在我知道我必须添加“/”才能让它工作了。 - davecave

3

@davecave，实际上是反斜杠（\）。 - Matthew Flaschen

2

超棒的工具：http://www.evotech.net/articles/testjsentities.html（无个人关联；我仅仅使用它） - Michael Benjamin

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Ball · Accepted Answer

为什么不直接将CSS文件保存/提供为UTF-8格式？

nav a:hover:after {
    content: "↓";
}

如果这还不够好，而你想要保持全ASCII，则可以：

nav a:hover:after {
    content: "\2193";
}

一个Unicode字符在字符串中的一般格式是 \000000 到 \FFFFFF - 一个反斜杠后面跟着六个十六进制数字。当Unicode字符是字符串中的最后一个字符或者你在Unicode字符后面加上空格时，可以省略前导的 0 数字。详细信息请参见下面的规范。

CSS2规范相关部分：

第三，反斜杠转义允许作者引用他们不能轻易放入文档中的字符。在这种情况下，反斜杠后面跟着最多六个十六进制数字（0..9A..F），表示具有该编号的 ISO 10646（[ISO10646]）字符，该编号不能为零。（如果样式表包含Unicode代码点为零的字符，则在 CSS 2.1 中未定义会发生什么。）如果十六进制数字后面跟着 [0-9a-fA-F] 范围内的字符，则需要明确数字的结尾。有两种方法可以做到这一点：

使用空格（或其他空白字符）："\\26 B"（"&B"）。在这种情况下，用户代理应将“CR/LF”对（U+000D/U+000A）视为单个空格字符。
提供完全相同的6个十六进制数字："\\000026B"（"&B"）

实际上，这两种方法可以结合使用。十六进制转义后只忽略一个空格字符。请注意，这意味着转义序列后的“真正”空格必须加倍。如果数字超出 Unicode 允许的范围（例如，“\110000”高于当前 Unicode 允许的最大值 10FFFF），UA 可以使用“替换字符”（U+FFFD）替换转义。如果要显示字符，则 UA 应该显示可见符号，例如“缺失字符”字形（参见 15.2，第 5 点）。注意：反斜杠转义始终被认为是identifier或字符串的一部分（即，“\7B”不是标点符号，即使“{”是，而“32”允许出现在类名的开头，即使“2”不是）。
标识符“te\st”与“test”完全相同。

全面列表：Unicode字符“向下箭头”（U+2193）。