关于 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 小时前
vue props
前端·javascript·vue.js
DsirNg16 小时前
页面栈溢出问题修复总结
前端·微信小程序
小徐_233316 小时前
uni-app 也能远程调试?使用 PageSpy 打开调试的新大门!
前端·微信小程序·uni-app
大怪v16 小时前
【Virtual World 03】上帝之手
前端·javascript
别叫我->学废了->lol在线等18 小时前
演示 hasattr 和 ** 解包操作符
开发语言·前端·python
霍夫曼18 小时前
UTC时间与本地时间转换问题
java·linux·服务器·前端·javascript
DARLING Zero two♡18 小时前
浏览器里跑 AI 语音转写?Whisper Web + cpolar让本地服务跑遍全网
前端·人工智能·whisper
Lovely Ruby19 小时前
前端er Go-Frame 的学习笔记:实现 to-do 功能(三),用 docker 封装成镜像,并且同时启动前后端数据库服务
前端·学习·golang
深红19 小时前
玩转小程序AR-实战篇
前端·微信小程序·webvr
银空飞羽19 小时前
让Trae SOLO全自主学习开发近期爆出的React RCE漏洞靶场并自主利用验证(CVE-2025-55182)
前端·人工智能·安全