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

标签：content 中文 场景 字符 乱码 css

更多关于 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';

 

标签：content,中文,场景,字符,乱码,css
From： https://www.cnblogs.com/fanqshun/p/17318102.html