Chinese garbled characters appear in the pseudo element content

The content of pseudo elements using Chinese characters may appear garbled in some browsers:

code show as below:

 .test:before {
  content: '计算结果=';
}

Solution

First, confirm that charset is utf-8

Make sure the HTML's META attribute is set to charset='utf-8' .
After testing, there will still be garbled characters.

Then, convert Chinese characters to Unicode encoding

Get the converted Unicode encoding and remove u :

 .test:before {
  content: '\8ba1\7b97\7ed3\679c\003d';
}

After testing, there will still be garbled characters.

Then, get the element attribute content through attr

 <div class='test' data-before='计算结果=' />
 
.test:before {
  content: attr(data-before);
}

If there are still garbled characters, give up using pseudo-elements......

attr

The attribute function attr() is used to get the attribute value in the HTML element and use it in the style. MDN Documentation
attr() can theoretically be used for all CSS properties but currently only the content property of pseudo-elements is supported, other properties and advanced features are currently experimental.