CSS：在对内容中的字符进行编码之后答案

【问题标题】：CSS:after encoding characters in contentCSS：在对内容中的字符进行编码之后
【发布时间】：2011-06-29 04:03:38
【问题描述】：

我正在使用以下 CSS，它似乎可以正常工作：

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

但是字符似乎不能像这样编码，因为输出是文字并显示了实际的字符串：

a.up:after{content: " &darr;";}
a.down:after{content: " &uarr;";}

如果我不能对其进行编码，感觉我应该在 jQuery 中使用诸如 .append() 之类的东西，因为它支持编码。有什么想法吗？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

哦，那行得通，太棒了，谢谢。出于兴趣，您在哪里找到了 UTF-8 转义序列。我以前从未见过这样的事情。（等待时限接受答案）
@danixd：在 Windows 上有字符映射（可在所有程序 > 附件 > 系统工具中找到）。您也应该能够通过网络搜索找到 UTF-8 字符及其转义表。
这是一个在线图表：htmlhelp.com/reference/html40/entities/symbols.html
在这个带有转换表的页面中，应该有一个额外的列用于包含 CSS 的“内容”定义的值。例如：ƒ在 HTML 的 Hex 中，CSS 内容的值为“\192”，依此类推。

【解决方案2】：

为什么还要对这些字符进行编码？请记住，您正在编写 CSS，而不是 HTML。你的代码：

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

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

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

编码字符仅在 HTML 中使用，因此内容和标签之间没有歧义。因此，您可以将&lt; 编码为&lt;，这样浏览器就不会认为它是标签的开头。像&darr; 这样的东西对于那些不知道如何使用 utf-8（或者不能，无论出于何种原因）的人来说只是商品:)。

【讨论】：

但是为什么不对内容进行编码以尽可能兼容呢？诚然，稍后（或由其他开发人员）查看代码时，编码值将无法“读取”，但您始终可以为此添加 cmets...并且在这种情况下，您无需记住保存整个在 UTF/Unicode 中。
事件 7 年后你的答案仍然有用。非常感谢！
@BoltClock 的回答更好。
互操作性是编码的原因之一。为什么你不想编码这些字符呢？ mathiasbynens.be/notes/css-escapes w3.org/International/questions/qa-css-charset davidsimpson.me/2014/02/04/…

【解决方案3】：

只是想补充一点，如果你想动态地通过the attr() function 设置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>

【讨论】：