CSS：在content中编码字符

Question

我正在使用以下CSS，它似乎有效：

a.up:after{content: " ↓";}
a.down:after{content: " ↑";}    

然而，字符似乎无法像这样进行编码，因为输出是文字字面量，并显示实际的字符串：

a.up:after{content: " ↓";}
a.down:after{content: " ↑";}   

如果我无法进行编码，感觉应该使用类似于jQuery中的.append()函数，因为它支持编码。有什么想法吗？

- theorise

---

当我使用 ✓ 时，遇到了类似的问题。将代码粘贴到 Firefox 的调试控制台中时可以正常工作，但在我的（UTF-8 编码）文件中编写相同的代码时，它无法正常工作，并在 HTML 页面和浏览器的开发人员控制台中显示为 ✓。在以 UTF-16 编码保存 CSS 文件后，它可以正常工作（原因是此字符需要 3 个字节，因此 UTF-8 无法正确处理它）。 - Radon8472

Answer 1

如果要在content中使用编码的Unicode字符，您需要提供这些字符本身（就像您现在所做的那样），或者它们的UTF-8转义序列而不是HTML实体：

a.up:after { content: " \2193"; }
a.down:after { content: " \2191"; }   

- BoltClock

---

哦，那个可以，太棒了，谢谢。顺便问一下，你在哪里找到的UTF-8转义序列？我以前从未见过这样的东西。（等待时间限制接受答案） - theorise

在Windows系统中有一个叫做字符映射表的工具（可以在所有程序 > 附件 > 系统工具中找到）。你也可以通过在网上搜索来找到UTF-8字符表和它们的转义序列。 - BoltClock

这是一个在线图表：http://htmlhelp.com/reference/html40/entities/symbols.html。 - snobojohan

在这个转换表格页面上，应该添加一列来显示CSS中“content”定义的值。例如：在HTML的16进制值中，"& #x192;"为"\192"，在CSS content中也是如此。 - TheCuBeMan

Answer 2

为什么你要编码那些字符呢？请记住，你正在编写 CSS，而不是 HTML。你的代码：

为什么你要编码那些字符呢？请记住，你正在编写 CSS，而不是 HTML。你的代码：

a.up:after{content: " ↓";}
a.down:after{content: " ↑";}

只要您使用UTF-8编码保存文件并发送适当的头信息，这是完全有效的：

Content-Type: text/css; charset=utf-8

编码字符仅在HTML中使用，以便内容和标签之间没有歧义。因此，您应将<编码为<，以便浏览器不会认为它是标签的开始。像↓这样的东西只是为那些不知道如何使用utf-8（或由于某种原因无法使用）的人提供的一种便利 :)

- Felix

---

为什么不将内容编码以尽可能兼容？是的，编码后的值在以后查看代码时（或由其他开发人员查看）将无法“读取”，但您始终可以添加注释...而且在这种情况下，您不需要记住将整个内容保存为UTF / Unicode。 - TheCuBeMan

您的回答7年后仍然非常有用。非常感谢！ - France Benoit

@BoltClock的答案更好。 - Felix

互操作性是编码的一个原因。你为什么不想无论如何对这些字符进行编码呢？参考链接：https://mathiasbynens.be/notes/css-escapes，https://www.w3.org/International/questions/qa-css-charset，https://davidsimpson.me/2014/02/04/use-ascii-code-in-css-content-on-pseudo-elements/ - albert

Answer 3

只是想补充一下，如果你想通过 attr() 函数 动态设置 content 的值，上面的方法不会起作用。请参见

document.getElementById('wontwork').setAttribute('data-sym', ' \2714 ');
document.getElementById('willwork').setAttribute('data-sym', ' \u2714 ');

button::before {
  content: attr(data-sym);
}
* {
  font-size: 30px
}

<button id='wontwork' data-sym='to-be-replaced'>not rendered</button>
<button id='willwork' data-sym='to-be-replaced'>rendered !</button>

- keepAlive