CODEWITHSUNDEEP
htmlcssutf-8
Ant
Ant

Reputation: 245

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!

Upvotes: 3

Views: 4573

Answers (1)

Luka Kerr
Luka Kerr

Reputation: 4239

&#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>

Upvotes: 10

Related Questions