CSS puts an html object as content

Question

Using the css property content, I am trying to make an HTML object 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 character, I get entity names.

Fiddle

How can i fix this ? Thank!

Answer 1

CSS is not HTML. You cannot use HTML objects in it.

Use an alphabetic character ( ✖) or CSS unicode escape instead.

Answer 2

:

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

: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Answer 3

Try

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

For the first, it gives a different character, so please check if you used the correct code for it ...

http://jsfiddle.net/7XXbK/

Answer 4

Here is a working fiddle:

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";
}

Instead, you need to use a character with a unicode character. You can use this translation tool for you if you need:

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