html - CSS 将 html 实体作为内容

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

<分区>

使用 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

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

最佳答案

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

使用文字字符 (✖) 或 CSS unicode escape相反。

关于html - CSS 将 html 实体作为内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22896383/