乐趣区

关于前端:伪元素-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 属性,其余的属性和高级个性目前是实验性的。

退出移动版