关于 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 分钟前
前端八股文面经大全:腾讯云前端实习一面(2025-12-26)·面经深度解析
前端·状态模式·腾讯云
哆啦A梦158816 分钟前
Vue3魔法手册 作者 张天禹 012_路由_(二)
前端·vue.js·typescript
木斯佳16 分钟前
前端八股文面经大全:2026-01-29 字节-AIDP前端实习一面面经深度解析
前端·状态模式
We་ct18 分钟前
LeetCode 100. 相同的树:两种解法(递归+迭代)详解
前端·算法·leetcode·链表·typescript
键盘鼓手苏苏31 分钟前
Flutter for OpenHarmony:injector 轻量级依赖注入库(比 GetIt 更简单的选择) 深度解析与鸿蒙适配指南
css·网络·flutter·华为·rust·harmonyos
哆啦A梦158840 分钟前
Vue3魔法手册 作者 张天禹 08_回顾TS中的-接口-泛型-自定义事件
前端·vue.js·typescript
星火开发设计1 小时前
序列式容器:list 双向链表的特性与用法
开发语言·前端·数据结构·数据库·c++·链表·list
PieroPc1 小时前
2026年,我的AI编程助手使用心得(纯个人体验,非评测)
javascript·css·html·fastapi·ai编程
014-code1 小时前
ESLint 详解
前端·eslint
GISer_Jing1 小时前
前端营销I(From AIGC)
前端·aigc·ai编程