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

场景:

需要在向下的箭头(点击该箭头可以打开列表页)在列表的上方补充一个"打开列表"的文字描述

在一些场景下,使用CSS去做改动会是最优的

易出现乱码的代码示例

css 复制代码
.headers::after {
 /* 直接填入中文,在某些场景下可能会产生乱码 */
  content: '打开列表';
  display: inline-block;
  position: absolute;
  font-family: 'pf';
  font-size: 0.16rem;
  color: #9ac2ff;
  letter-spacing: 0;
  font-weight: 400;
  text-align: center;
  right: 0.2rem;
  top: -0.45rem;
}

可行的方案是将中文转为unicode码后填入

例如 "打开列表" 转为 unicode码后 为:\u6253\u5f00\u5217\u8868

css 复制代码
/* 将 content: '打开列表'; 转为: */
content: '\6253\5f00\5217\8868';

注意:\u6253\u5f00\u5217\u8868并不能直接在content中使用并启效,需要去除单元中的'u'字符,即 \6253\5f00\5217\8868

点我打开:在线编译unicode码

相关推荐
卸任15 小时前
Vibe coding工具使用心得
前端·ai编程
brien916 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance16 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M17 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写17 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李17 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易17 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马17 小时前
前沿视界
前端
kyriewen17 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易17 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员