Menu
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!
925
In CSS you need to use a Unicode escape sequence in place of HTML Entities. This is based on the hexadecimal value of a character. I found that the easiest way to convert symbol to their hexadecimal equivalent is, such as from ▾ ( ▾ ) to \25BE is to use the Microsoft calculator =) Yes.
Definition and Usage The htmlspecialchars() function converts some predefined characters to HTML entities.
CSS isn't HTML. You can't use HTML entities in it.
Use the literal character (✖) or a CSS unicode escape instead.
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
