关于 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码

相关推荐
iambooo8 分钟前
Bash 执行机制与进程模型:理解 Shell 的底层逻辑
前端·chrome
a11177610 分钟前
个人展示页面(html 线条交互)
前端·开源·html
笨蛋不要掉眼泪10 分钟前
Spring Cloud Gateway 核心实战:断言(Predicate)的长短写法与自定义工厂详解
java·前端·微服务·架构
RichardLau_Cx13 分钟前
零依赖!纯前端 AI 辅助病例管理系统 aiCaseManage:无后端也能实现诊疗行为核验
前端·人工智能·前端开发·localstorage·医疗科技·ai辅助开发·零依赖项目
Never_Satisfied31 分钟前
在HTML & CSS中,CSS选中第二个指定类型的子元素的方法
前端·css·html
木斯佳34 分钟前
前端八股文面经大全:字节跳动前端一面(2025-10-09)·面经深度解析
前端·状态模式
Never_Satisfied35 分钟前
在HTML & CSS中,图片嵌入文字方法
前端·css·html
huohaiyu7 小时前
从URL到页面的完整解析流程
前端·网络·chrome·url
阿星AI工作室9 小时前
一个简单Demo彻底理解前后端怎么连的丨Figma + Supabase + Vercel
前端·人工智能
aircrushin9 小时前
一拍即传的平替,完全免费的实时照片墙!
前端