Medvedev A. Medvedev A. - 2 months ago 6
CSS Question

How to use character code with ::before pseudo element

I have html with

<meta charset="UTF-8">
and want add black right-pointing pointer to
span::before
but it`s not working.

If I simply put &#x25ba to html I would see pointer. But with
content
I see different problems.
I try
content: '►';
- it`s show strange symbol.

Also does not work
'&#x25ba'
,
'\&#x25ba'
,
'\x25ba'
,
'\#x25ba'
,
'\9658'
and other combinations. I can use background-image or something like that, but I don`t want do this.

Maybe you know what I`m doing wrong? Thanks for help!

Answer

&#9658; is the unicode for a right pointing arrow

25B6 or 25BA is the hex for a right pointing arrow

In CSS you need to escape the hex when using it, see working example

e.g.

span::before {
  content: '\25B6';
}

#span-2::before {
  content: '\25BA';
}
<meta charset="UTF-8">

<span> Right Pointing Arrow</span>
<br><br>
<span id="span-2"> Another right pointing arrow</span>

<p>&#9658; Unicode Right pointing arrow in HTML</p>