如何使用ngx-translate翻译CSS选择器::after、::before的content内容

ngx-translate本身是Angular生态下运行在JS/TS逻辑层的国际化工具，无法直接修改静态CSS中::after/::before的content固定值，因为伪元素属于浏览器渲染生成的虚拟节点，不属于真实DOM，也无法被ngx-translate直接识别处理。

你可以通过以下三种常用方案实现需求：

方案1：通过CSS变量绑定翻译值（需要少量TS逻辑） #

第一步修改你的CSS代码，将content替换为CSS变量引用：

.custom-file-label::after {
    content: var(--browse-text, "Browse");
}

第二步在组件逻辑中监听翻译结果，将值写入对应节点的CSS变量：

import { Component, ElementRef, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  // 你的组件原有配置
})
export class YourComponent implements OnInit {
  constructor(
    private translate: TranslateService,
    private el: ElementRef
  ) {}

  ngOnInit(): void {
    // 初始化赋值
    this.updateBrowseText();
    // 监听语言切换事件，实时更新
    this.translate.onLangChange.subscribe(() => {
      this.updateBrowseText();
    });
  }

  private updateBrowseText(): void {
    const translatedText = this.translate.instant('common.browse'); // 替换为你的翻译key
    const labelEl = this.el.nativeElement.querySelector('.custom-file-label');
    labelEl.style.setProperty('--browse-text', `"${translatedText}"`);
  }
}

方案2：通过data属性+attr()函数绑定（无需额外TS逻辑，推荐） #

修改CSS代码，用attr()读取节点的自定义属性值作为content：

.custom-file-label::after {
    content: attr(data-browse-text);
}

直接在组件模板中通过ngx-translate管道给自定义属性赋值，语言切换时会自动更新：

<label 
  class="custom-file-label"
  [attr.data-browse-text]="'common.browse' | translate"
>
  <!-- 标签原有内容 -->
</label>

方案3：替换伪元素为真实DOM节点（最易维护，优先推荐） #

如果没有必须使用伪元素的特殊场景，直接在模板中添加节点使用ngx-translate翻译即可，无需额外适配：

<label class="custom-file-label">
  <!-- 标签原有内容 -->
  <span class="browse-suffix">{{ 'common.browse' | translate }}</span>
</label>

把原伪元素的样式迁移到.browse-suffix类上即可。

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