CSS将html实体作为内容[重复]答案

【问题标题】：CSS put html entity as content [duplicate]CSS将html实体作为内容[重复]
【发布时间】：2014-05-18 17:59:21
【问题描述】：

使用 css content 属性，我试图在元素之后放置一个 HTML 实体。

这是我的 HTML：

<table id="tic" cellpadding="0" cellspacing="0" border="5" bordercolor="black" bordercolorlight="gray" bgcolor="white">
    <tr>
        <td width="55" height="55" class="x"></td>
        <td width="55" height="55" class="o"></td>
        <td width="55" height="55" class="x"></td>
    </tr>
    <tr>
        <td width="55" height="55" class="o"></td>
        <td width="55" height="55" class="x"></td>
        <td width="55" height="55" class="o"></td>
    </tr>
    <tr>
        <td width="55" height="55" class="x"></td>
        <td width="55" height="55" class="o"></td>
        <td width="55" height="55" class="x"></td>
    </tr>
</table>

还有我的 CSS：

table{
    text-align:center;
    font-size:2em;
    font-weight:bold;
}
td.o:after{
    content:"&#9675;";
    font-weight:bold;
}
td.x:after{
    content:"&#x2716;"
}

不幸的是，我没有得到 ○ 字符和 ✖ 字符，而是得到了实体名称。

FIDDLE

我该如何解决这个问题？谢谢！

【问题讨论】：

unicode-table.com 并使用来自@dejakob 的答案作为代码。发疯
你必须使用转义的 unicode.. 检查下面的 stackoverflow.. stackoverflow.com/questions/190396/…

标签： html css html-entities html-encode html-escape-characters

【解决方案1】：

CSS 不是 HTML。您不能在其中使用 HTML 实体。

请改用文字字符 (✖) 或 CSS unicode escape。

【讨论】：

谢谢，这对我有用。不幸的是，我不能再接受八分钟……:(
8 分钟过去了...

【解决方案2】：

试试

td.o:after{
    content:"\9675";
    font-weight:bold;
}
td.x:after{
    content:"\2716"
}

对于第一个，它给出了另一个符号，所以请检查你是否使用了正确的代码......

http://jsfiddle.net/7XXbK/

【讨论】：

【解决方案3】：

这是一个适合你的小提琴：

http://jsfiddle.net/Dp78c/4/

table{
    text-align:center;
    font-size:2em;
    font-weight:bold;
}
td.o:after{
    content:"\25CB";
    font-weight:bold;
} 
td.x:after{
    content:"\2716";
}

您需要改用 unicode 转义字符。如果您需要，也可以使用此工具为您翻译：

http://www.evotech.net/articles/testjsentities.html

【讨论】：

【解决方案4】：

你必须使用转义的 unicode：

喜欢

td.o:after {
    content:"\00a2"; 
}
td.x:after {
    content:"\00a4"; 
}

【讨论】：