CSS put html entity as content [duplicate]

Question

Using the css content property, I am trying to make put an HTML entity after an element.

Here is my 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>

And my CSS:

table{
    text-align:center;
    font-size:2em;
    font-weight:bold;
}
td.o:after{
    content:"○";
    font-weight:bold;
}
td.x:after{
    content:"✖"
}

Unfortunately, instead of getting the ○ character and the ✖ character, I get the entity names.

FIDDLE

How can I fix this? Thanks!

Answer 1

CSS isn't HTML. You can't use HTML entities in it.

Use the literal character (✖) or a CSS unicode escape instead.