How can I use single quotes in CSS: after an element

Question

I am trying to set the content of css: after the element is touching, for example

:after{ content: '7'4 ' } 

The desired result should be 7'4. What can I do for this? I already tried using different encodings like

  - ' - ' - \u27 

but this always leads to disconnection of content for 7 '

any ideas?

Answer 1

You can escape the single quote: http://jsfiddle.net/NKHaQ/1/

 .foo:after{ content: '7\'4'; } 

Alternatively, you can specify the value twice:

 .foo:after{ content: "7'4"; } 

• Specification

Double quotes cannot be found inside double quotes unless escaped (like "\" "or like" \ 22 "). Likewise for single quotes ('\' 'or' \ 27 ').

 content: "this is a 'string'."; content: "this is a \"string\"."; content: 'this is a "string".'; content: 'this is a \'string\'.'; 

You can also do this: http://jsfiddle.net/NKHaQ/4/

 .foo:after{ content: '7\27 4'; } 

However, in addition to being difficult for you to read, this creates the potential for a subtle problem. If you omit the space after \27 , it will work along with 4 , which is then parsed as \274 , which gives the wrong conclusion.