CSS：对内容中的字符进行编码后

Question

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

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

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

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

如果我无法对其进行编码，感觉我应该使用一些东西例如 jQuery 中的 .append()，因为它支持编码。有什么想法吗？

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 3

只是想补充一下，如果您想通过attr() 函数，上面的方法不起作用。看

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>