如何通过TS代码修改CSS库中类的伪元素content属性值

伪元素::before/::after属于CSS渲染生成的内容，不在真实DOM树中，无法直接通过选择器拿到实例修改样式，以下是3种生产环境可用的实现方式，按推荐优先级排序：

方案1：CSS变量绑定（最推荐，符合框架开发规范） #

这个方案侵入性最低，维护成本最小，不需要操作原生DOM。

1. 先修改原有CSS规则，把硬编码的content值替换为CSS变量，保留原有默认值：

   .tabella .pagination > li:last-child > a:before, 
   .tabella .pagination > li:last-child > span:before {
       padding-right: 5px;
       /* 定义CSS变量，默认值为原来的avanti */
       content: var(--pagination-next-label, "avanti");
       width: 60px;
   }
   

2. 在组件TS类中定义动态变量，后续需要修改文案时直接给该变量赋值即可：

   // 分页按钮文案，可随时修改
   paginationNextText = 'avanti';
   
   // 比如切换多语言时直接赋值即可生效
   switchLang(lang: 'it' | 'zh' | 'en') {
     if(lang === 'it') this.paginationNextText = 'avanti';
     if(lang === 'zh') this.paginationNextText = '下一页';
     if(lang === 'en') this.paginationNextText = 'Next';
   }
   

3. 在HTML模板中给分页组件的外层元素绑定CSS变量值即可：

   <!-- 注意content属性要求传入字符串类型，模板里要给变量值套一层单引号，否则样式会失效 -->
   <ul class="pagination" [style.--pagination-next-label]="`'${paginationNextText}'`">
       <li class="paginate_button previous" [ngClass]="{'disabled': pageActive === 1}"></li>
       <li class="paginate_button" [ngClass]="{'active': page===pageActive}"
           *ngFor="let page of _totalPageSlice">               
       </li>
       <li class="paginate_button next" id="{{id}}_{{id}}_next"
           [ngClass]="{'disabled': pageActive === _totalPage}" label="_next">
       </li>
   </ul>
   

注意：该方案不受Angular视图封装模式影响，默认Emulated模式、ShadowDom模式下都可正常生效。

方案2：动态插入/修改CSS规则（适合无法修改原有全局CSS的场景） #

如果你的CSS是第三方库引入的，没有权限修改原有规则，可以直接在TS中动态插入高优先级样式覆盖原有值：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({/* 组件配置 */})
export class PaginationComponent implements OnInit, OnDestroy {
  // 动态创建的style标签实例，组件销毁时需要移除
  private dynamicStyleEl: HTMLStyleElement;
  private styleSheet: CSSStyleSheet;

  ngOnInit() {
    // 初始化时创建style标签插入文档
    this.dynamicStyleEl = document.createElement('style');
    document.head.appendChild(this.dynamicStyleEl);
    this.styleSheet = this.dynamicStyleEl.sheet as CSSStyleSheet;
  }

  // 调用该方法即可动态修改伪元素文案
  updateNextBtnText(text: string) {
    // 先清除旧规则，避免规则堆积
    if (this.styleSheet.cssRules.length > 0) {
      this.styleSheet.deleteRule(0);
    }
    // 插入新的覆盖规则，加!important保证优先级高于原有样式
    this.styleSheet.insertRule(`
      .tabella .pagination > li:last-child > a:before, 
      .tabella .pagination > li:last-child > span:before {
        content: "${text}" !important;
      }
    `, 0);
  }

  ngOnDestroy() {
    // 组件销毁时移除动态插入的style标签，避免内存泄漏
    this.dynamicStyleEl.remove();
  }
}

该方案不需要修改模板和原有CSS，缺点是需要手动处理DOM创建和销毁逻辑。

方案3：替换伪元素为真实DOM节点（零CSS逻辑成本） #

如果不想处理CSS相关逻辑，可以直接把伪元素渲染的文案改成真实DOM节点：

1. 把原有CSS中伪元素的content属性设为空，其他排版样式保留
2. 在分页的li.next节点内部新增<span>标签，直接通过Angular插值绑定TS中的文案变量即可
   该方案逻辑最直白，但是需要修改原有模板结构和CSS规则，适合小范围快速迭代的场景。

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