能否在CSS伪元素的content属性中使用正则表达式匹配属性值

结论 #

目前不存在纯CSS实现该需求的方案。

原因说明 #

1. CSS 的属性选择器（如[class^="special"]）的作用仅为匹配符合规则的元素，并不具备提取属性值中部分片段的能力，你不能将选择器语法嵌套到attr()函数内做值提取，这不符合CSS的语法规范。
2. 现有浏览器支持的attr()函数功能非常有限，只能完整返回指定属性的全部值，不支持任何字符串截取、正则匹配、部分内容提取的能力。即使还在草案阶段的CSS attr() Level 3规范，也没有加入正则匹配提取属性片段的相关定义，该能力短期内没有落地支持的可能。

可行替代方案 #

方案1：配合JS实现（无需修改原有HTML结构） #

先通过JS遍历对应元素，筛选出以special开头的类名存入自定义属性，再用CSS读取该自定义属性即可：

document.querySelectorAll('.normal-class').forEach(el => {
  // 筛选类名中以special开头的项
  const targetClass = Array.from(el.classList).find(cls => cls.startsWith('special'))
  if (targetClass) {
    // 存入自定义属性
    el.dataset.targetClass = targetClass
  }
})

对应的CSS代码：

.normal-class::before {
  content: attr(data-target-class);
}

方案2：直接在HTML中写入自定义属性（性能最优） #

如果允许修改HTML代码，直接把需要展示的内容提前写入data-*属性，不需要额外运行JS：

<div class="special-class normal-class" data-target-class="special-class"></div>

CSS代码和方案1一致即可。

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