如何将CSS伪元素content中的静态文本改为动态多语言文本？

嘿，刚好能解答你的问题——原生CSS本身没办法直接读取翻译文件里的变量ID并动态替换content里的文本，毕竟CSS是静态样式语言，没有内置的文件解析或动态数据获取能力。不过有几个实用的方案能帮你实现需求，我给你拆解清楚：

方案1：CSS自定义属性（变量）+ JavaScript动态注入 #

这是多语言场景下最常用的方案，步骤很清晰：

• 先把你的CSS代码改成用CSS变量替代静态文本：

  $sSCP .warning:before {
    color: #E40613;
    background-color: #fafafa;
    font-size: 15px;
    margin-left: 0px;
    width: auto;
    content: "\f071 " var(--warning-text); /* 用CSS变量占位 */
  }
  

• 然后用JS读取你的翻译文件（比如JSON格式），把对应变量ID的文本注入到CSS变量里：

  // 假设你的翻译文件是这样的结构
  const translations = {
    "warning_label": "WARNING" // 这里就是你说的变量ID对应文本
  };
  
  // 把翻译文本赋值给根元素的CSS变量，全局生效
  document.documentElement.style.setProperty('--warning-text', `"${translations.warning_label}"`);
  

  注意这里要给文本套上双引号，因为CSS的content属性要求值是字符串类型。

方案2：用CSS预处理器（Sass/Less）导入静态翻译变量 #

如果你的项目在用Sass这类预处理器，可以把翻译文本做成预处理器变量文件，编译时直接替换：

• 先建一个翻译变量文件_translations.scss：

  $warning-text: "WARNING"; // 对应你的翻译变量ID
  

• 然后在你的样式文件里导入并使用：

  @import 'translations';
  
  $sSCP .warning:before {
    color: #E40613;
    background-color: #fafafa;
    font-size: 15px;
    margin-left: 0px;
    width: auto;
    content: "\f071 #{$warning-text}"; // 用Sass变量插值替换
  }
  

  这个方案的局限是编译时静态替换，没办法在运行时动态切换语言，适合单语言静态项目。

方案3：利用HTML data属性传递动态文本 #

把翻译后的文本存在HTML元素的data-*属性里，CSS通过attr()函数直接读取：

• 先给目标元素加个data属性：

  <div class="warning" data-warning-text="WARNING"></div>
  

• 然后修改CSS代码：

  $sSCP .warning:before {
    color: #E40613;
    background-color: #fafafa;
    font-size: 15px;
    margin-left: 0px;
    width: auto;
    content: "\f071 " attr(data-warning-text); /* 读取data属性值 */
  }
  

  这种方式不需要预处理器，后续要切换语言的话，只用JS修改元素的data-warning-text属性值就行，非常灵活。

总结一下，虽然原生CSS做不到直接导入翻译文件的变量ID，但通过上面几种方案，完全能实现你要的动态替换content文本的需求，你可以根据项目的技术栈和是否需要动态切换语言来选最合适的方式~

内容的提问来源于stack exchange，提问作者Frank Manuela Thijssen