how to render Unicode correctly

Question

good afternoon to all!!! Guys, next, I have the following code "&#x25Bc" it has to render in the browser an up arrow...However, when launching in the "content" of before, it renders exactly these characters and not the arrow symbol... what can be the cause of this? text editor? syntax? encoding what do you suggest? follows the excerpt I used in before...

before{content: '\&#x25Bc';}

also tried variations...

before{content: "\&#x25Bc";}

and nothing of the symbol appears...

Answer 1

I used another code to put the arrow

.teste::before{
  content: "\2191";
}

<div class="teste">
</div>

I used this list, If you don’t want this arrow just check the list and change your code.

Answer 2

Face actually you need to "escape" the hexadecimal unicode with a counter bar \

Then your Unicode escape would look like this: &#x25Bc = \25Bc or \0025Bc _{(4 or 6 digits)}

Reference link of that union: http://www.codetable.net/hex/25bc

See what it says to W3C

CSS represents escaped characters in a Different way. Escapes start with a backslash Followed by the hexadecimal number that represents the Character’s hexadecimal Unicode code point value.

PORTUGUÊS "CSS stands for characters from escape in a different way. Escapes begin with a backslash followed by the hexadecimal number representing the hexadecimal value of the Unicode character code point."

Official link to W3C on the subject: https://www.w3.org/International/questions/qa-escapes#cssescapes

.icon::before{
  content: "\25Bc";
}

<div class="icon"></div>
(&#x25Bc) = &#x25Bc; = content: "\25Bc";