关于前端:伪元素-content-出现中文乱码

伪元素的 content 应用中文字符在某些浏览器可能会呈现乱码：

代码如下：

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

解决办法

首先，确认 charset 为 utf-8

确保 HTML 的 META 属性设置为 charset='utf-8'。
经测试，还是会呈现乱码。

而后，将中文字符转成 Unicode 编码

拿到转化后的 Unicode 编码，去掉 u:

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

经测试，还是会呈现乱码。

而后，通过 attr 获取元素属性内容

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

如果还会呈现乱码， 就放弃应用伪元素吧…….

attr

属性函数 attr() 用于获取 HTML 元素外面的属性值并用于款式中。MDN文档
attr() 实践上能用于所有的 CSS 属性但目前反对的仅有伪元素的 content 属性，其余的属性和高级个性目前是实验性的。