526互联

关于 css 伪元素 content属性值 为中文字符时出现乱码问题的处理

发布时间 2023-04-14 13:58:29作者: 樊顺
更多关于 css content属性 的介绍
点我

 

场景：
需要在右箭头（点击该箭头是可以跳转到详情页）的左侧补充一个“更多”的文字描述

 

在一些场景下，使用CSS去做改动会是最优的，比如无源码等
 
易出现乱码的代码示例
i.common-right-arrow-icon {
  position: relative;
}

i.common-right-arrow-icon::before {
  /* 直接填入中文，在某些场景下可能会产生乱码 */
  content: '更多';
  position: absolute;
  left: -20px;
  width: 36px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

 

可行的方案是将中文转为ASCII码后填入
例如 “更多” 转为 ASCII码后 为：
\u66f4\u591a
注意：\u66f4\u591a并不能直接在content中使用并启效，需要去除单元中的'u'字符，即 \66f4\591a
 
Code
/* 将 content: '更多'; 转为： */
content: '\66f4\591a';