CSS将html实体作为内容


CSS put html entity as content

本问题已经有最佳答案，请猛点这里访问。

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

这是我的HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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：

1
2
3
4
5
6
7
8
9
10
11
12
table{
    text-align:center;
    font-size:2em;
    font-weight:bold;
}
td.o:after{
    content:"&#9675;";
    font-weight:bold;
}
td.x:after{
    content:"&#x2716;"
}

不幸的是，没有得到○字符和？字符，我得到实体名。

小提琴

我怎么修这个？谢谢！

相关讨论

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

使用文字字符(?或css-unicode转义。

相关讨论

必须使用转义的Unicode:

喜欢

1
2
3
4
5
6
td.o:after {
    content:"\00a2";
}
td.x:after {
    content:"\00a4";
}

更多信息请访问：http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

这是一把工作小提琴：

http://jsfiddle.net/dp78c/4/

1
2
3
4
5
6
7
8
9
10
11
12
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/testjssentities.html

尝试

1
2
3
4
5
6
7
td.o:after{
    content:"\9675";
    font-weight:bold;
}
td.x:after{
    content:"\2716"
}

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

http://jsfiddle.net/7xbk/