CODEWITHSUNDEEP
cssxhtmlcharacter
sethvargo
sethvargo

Reputation: 26997

HTML special characters in CSS "content" attribute

I'm trying to add content to something before an item using the CSS :before + content: fields. I want to insert a checkmark (☑), BUT if I use that in the content option, it prints as the literal. How can I tell CSS to make that a checkmark, not the literal string ☑?

Upvotes: 14

Views: 26342

Answers (3)

Flack
Flack

Reputation: 5892

Try this:

#target:before {
  content: "\2611";
}

Upvotes: 29

Brad Mace
Brad Mace

Reputation: 27886

You need to use Unicode values inside the content property. (The list of miscellaneous symbols may also be useful.)

A heavy checkmark is listed as U+2713 so you would put content: "\2713";

Upvotes: 6

Yi Jiang
Yi Jiang

Reputation: 50095

Use the checkbox character literally in your CSS rule instead of the encoding - 

#target:before {
    content: "☑";
}

See: http://jsfiddle.net/e3Wt2/

Upvotes: 3

Related Questions