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:"&#9675;";
    font-weight:bold;
}
td.x:after{
    content:"&#x2716;"
}

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

FIDDLE

How can I fix this? Thanks!

unicode-table.com and use the answer from @dejakob for the code. Go nuts — Deryck
– Deryck, Commented Apr 6, 2014 at 16:07
you have to use the escaped unicode.. check below stackoverflow.. stackoverflow.com/questions/190396/… — Deepak Sharma
– Deepak Sharma, Commented Apr 6, 2014 at 16:09

Quentin · Accepted Answer · 2014-04-06 16:01:10Z

4

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

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

answered Apr 6, 2014 at 16:01

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Progo Over a year ago

Thank you, this worked for me. Unfortunately I can't accept it for eight more minutes… :(

GolezTrol Over a year ago

8 minutes have past...

Deepak Sharma · Accepted Answer · 2014-04-06 16:10:48Z

3

You have to use the escaped unicode :

Like

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

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

answered Apr 6, 2014 at 16:10

Deepak Sharma

4,1801 gold badge17 silver badges31 bronze badges

Comments

dejakob · Accepted Answer · 2014-04-06 16:05:11Z

0

Try

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

For the first one, it gives another symbol, so please check if you used the right code for it...

http://jsfiddle.net/7XXbK/

answered Apr 6, 2014 at 16:05

dejakob

2,11215 silver badges22 bronze badges

Comments

slapthelownote · Accepted Answer · 2014-04-06 16:10:35Z

0

Here's a working fiddle for you:

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

You need to use the unicode escaped character instead. You can use this tool to translate for you as well if you need to:

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

answered Apr 6, 2014 at 16:10

slapthelownote

4,2791 gold badge25 silver badges27 bronze badges

Collectives™ on Stack Overflow

CSS put html entity as content [duplicate]

4 Answers 4

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Linked

Related