如何避免CSS :before、:after 中文乱码

原文转载自：https://blog.csdn.net/hongyu799/article/details/109114843

问题背景：

在进行页面开发时，经常会使用:before, :after伪元素创建一些小tips，但是在:before或:after的content属性使用中文的话，会导致某些浏览器上出现乱码。

解决方案：

避免在CSS的:before, :after中使用中文，如果一定要使用，可以使用中文对应的Unicode。可以使用使用站长工具，或者是JavaScript的原生方法escape将中文转为Unicode。

需要注意的是Unicode在CSS中的书写方式，例如“小时”对应的Unicode是'\u5c0f\u65f6'，而在CSS中要写成（去掉里面的u，切记切记）

.&::before{
  position: absolute;
  top:0;
  left:0;
  width:300px;
  height: 46px;
  background-image: linear-gradient(180deg, #0082F5 0%, #005BAC 100%);
  border-radius: 8px 0px 30px 0px;
  // content:'学习领域';
  content: '\5b66\4e60\9886\57df';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #FFFFFF;
  font-weight:500;
}

//unicode在线转换地址：https://www.bejson.com/convert/unicode_chinese/