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

相关推荐
云空16 分钟前
《Three.js 完整版3D魔方:带贴纸+中心固定+自动求解复原》
前端·javascript·3d·three.js
酸梅果茶18 分钟前
【7】lightning_lm项目-LIO 前端 -IVox 局部地图
前端·slam
gis开发之家36 分钟前
《Vue3 从入门到大神33篇》Vue3 源码详解(三):响应式核心思想——从 Object.defineProperty 到 Proxy
前端·javascript·vue.js·vue3·vue3源码
Hyyy44 分钟前
流式渲染的基础——SSE
前端·后端·面试
Csvn1 小时前
📐 Layout Thrashing——一个 `offsetHeight` 让你的页面卡成 PPT
前端
qq_529599382 小时前
react js循环滚动
前端·javascript·react.js
索西引擎2 小时前
【React】严格模式:开发阶段质量保障的静态分析机制
前端·react.js·前端框架
玉宇夕落2 小时前
详细流式输出学习
前端
秃头披风侠_郑2 小时前
【uniapp】一文让你学会微信小程序+APP+H5全平台实战指南
前端·微信小程序·uni-app
嘟嘟07172 小时前
从零搞懂 RAG 文档处理:逐行拆解 Loader 和 Splitter,一行代码背后发生了什么
前端