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

只需添加一下，如果您想通过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>