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

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.

http://www.w3.org/International/questions/qa-escapes – Quentin Aug 12 '13 at 11:49 — Quentin, Aug 12 '13 at 11:49

koningdavid · Accepted Answer · 2013-08-12T12:01:05.637

88

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'
}

edited Aug 12 '13 at 12:01

answered Aug 12 '13 at 11:49

koningdavid

7,903
7
35
46

Thank you very much. Its really nice. – Jay Shukla Aug 12 '13 at 11:52
2

Just to make the why a bit clearer: You can't use HTML entities in CSS, but you can use Unicode hex escapes – Sven Bieder Aug 12 '13 at 11:54
3

Just upvoted because of the link you shared :) – Mr. Alien Aug 12 '13 at 11:54
@SvenBieder Thanks, i've added your suggestion to the answer – koningdavid Aug 12 '13 at 12:01
2

I needed a left arrow. It's \25C4. Other variations here - https://codepoints.net/geometric_shapes – yazzer Apr 15 '15 at 20:31
Whoa nice one. Thank you. – Abdellah Ramadan Apr 22 '21 at 15:19

score 4 · Answer 2 · answered Aug 12 '13 at 11:53

4

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

See Demo Here

answered Aug 12 '13 at 11:53

Vikas Ghodke

6,602
5
27
38

2

Yea even I got the converter now :) – Mr. Alien Aug 12 '13 at 11:55

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

2 Answers2