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