How to add html special character (right-arrow) using content property of css? [duplicate]

Question

I am trying to add html special character using its code. Its working fine when I use it inside my div but how can I do this using css.

I have tried as following.

.right-arrow:after {     content:'&#9658' } 

DEMO

EDIT

What I wanted is not there in Matt Ball's answer because I wanted code for right arrow and in that question there is code for down arrow only. So its not duplicate.

Answer 1

Special characters work a little bit different with pseudo-elements. You can't use HTML entities in CSS, but you can use Unicode hex escapes. Here is a tool to convert the numeric value of the special character to the CSS value.

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

for example &#9658 needs to be \25BA

working example:

http://jsfiddle.net/L6suy/

.right-arrow:after {     content:'\25BA' } 

Answer 2

<div class="right-arrow">Arrow</div> .right-arrow:before {     content:'\25BA'; } 

See Demo Here