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

Posted 2023-03-05

【中文标题】CSS将html实体作为内容[重复]

【英文标题】：CSS put html entity as content [duplicate]

【发布时间】：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   class="x"></td>
        <td   class="o"></td>
        <td   class="x"></td>
    </tr>
    <tr>
        <td   class="o"></td>
        <td   class="x"></td>
        <td   class="o"></td>
    </tr>
    <tr>
        <td   class="x"></td>
        <td   class="o"></td>
        <td   class="x"></td>
    </tr>
</table>

还有我的 CSS：

table
    text-align:center;
    font-size:2em;
    font-weight:bold;

td.o:after
    content:"○";
    font-weight:bold;

td.x:after
    content:"✖"

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

FIDDLE

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

【问题讨论】：

unicode-table.com 并使用来自@dejakob 的答案作为代码。发疯

你必须使用转义的 unicode.. 检查下面的 ***.. ***.com/questions/190396/…

【参考方案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"; 

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