如何提取class名指定内容作为CSS ::after伪元素的content属性值

结论 #

原生CSS目前不支持类似JavaScript的动态字符串拆分、截取功能，无法直接从class属性值中自动提取language-后的后缀内容。你可以选择以下几种常用替代方案实现需求：

方案1：使用自定义data-*属性（最推荐） #

直接在HTML中新增自定义属性存储语言标识，CSS直接读取该属性值即可，性能最好也最灵活：

示例代码 #

<code class="language-css" data-lang="css"> some code here </code>
<code class="language-html" data-lang="html"> some code here </code>
<code class="language-javascript" data-lang="javascript"> some code here </code>

code::before {
  content: attr(data-lang);
}

方案2：属性选择器枚举匹配 #

如果无法修改HTML结构，且站点支持的代码语言类型有限，可以用属性选择器匹配对应类名后手动指定content值：

示例代码 #

code[class*="language-css"]::before {
  content: "css";
}
code[class*="language-html"]::before {
  content: "html";
}
code[class*="language-javascript"]::before {
  content: "javascript";
}

注意：该方案需要为每一种新增的代码语言单独编写CSS规则，维护成本较高。

方案3：少量JS辅助实现动态提取 #

如果希望完全自动处理不需要手动维护枚举规则，可以用极少量JS提前提取语言标识存入自定义属性，再配合CSS读取：

示例代码 #

// 自动提取所有code元素的语言标识
document.querySelectorAll('code[class*="language-"]').forEach(codeEl => {
  const langMatch = codeEl.className.match(/language-([a-z0-9]+)/i);
  if (langMatch) {
    codeEl.dataset.lang = langMatch[1];
  }
})

code::before {
  content: attr(data-lang);
}

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