如何在JavaScript data属性中使用特殊字符适配CSS ::after content？

问题根源 #

当用data-text属性存储文本并通过CSS attr()读取时，HTML属性的引号规则会和特殊字符冲突：比如用双引号包裹data-text时，属性内的双引号会直接截断属性值，导致CSS读取到不完整的内容；直接使用JS/字符串转义符（如\"）不适用于HTML属性，自然无法被CSS正确识别。

正确解决方案 #

1. HTML端规范转义特殊字符

根据data-text属性的包裹引号类型，对内部特殊引号做HTML实体转义：

• 若属性用双引号包裹，内部双引号转成"，单引号可直接使用
• 若属性用单引号包裹，内部单引号转成'，双引号可直接使用

示例代码：

<!-- 双引号包裹属性，内部双引号转义 -->
<h1 class="stroke-fix" data-text="This is a &quot;quoted&quot; text with 'single quotes'"></h1>

<!-- 单引号包裹属性，内部单引号转义 -->
<h1 class="stroke-fix" data-text='This is a "quoted" text with &apos;single quotes&apos;'></h1>

2. CSS端无需额外处理

CSS的attr(data-text)会自动解析HTML实体为对应字符，直接保留原有伪元素逻辑即可：

.stroke-fix {
  position: relative;
  -webkit-text-stroke: 1.5px #000;
  color: transparent;
}
.stroke-fix::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0;
  color: #fff;
}

为什么encodeURI无效？ #

encodeURI会将特殊字符转为百分号编码（如"变成%22），但CSS的attr()不会自动解码这类URL编码，只会直接显示编码后的字符串，因此这种方法不适用。

内容的提问来源于stack exchange，提问作者CRAIG