CSS put html entity as content -

this question has answer here:

• adding html entities using css content 8 answers

using css content property, trying make put html entity after element.

here 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 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 ○ character , ✖ character, entity names.

fiddle

how can fix this? thanks!

css isn't html. can't use html entities in it.

use literal character (✖) or css unicode escape instead.