Angular 6及以上版本如何动态设置CSS伪元素after的属性？

核心用CSS自定义属性（CSS变量）实现，伪元素可继承宿主元素的CSS变量，Angular只需绑定宿主的样式变量即可动态更新伪元素属性，无需预定义大量类。

步骤1：调整组件CSS样式 #

在你的组件样式文件中，将伪元素的渐变参数替换为CSS变量，可设置默认值兼容异常场景：

/* 目标元素类名，可根据你的需求修改 */
.target-element {
  position: relative;
  /* 预设变量默认值 */
  --color-1: #191489;
  --color-2: rgba(25,20,137,0.2);
  --percent-1: 94.7%;
  --percent-2: 100%;
}

.target-element::after {
  content: '';
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, var(--color-1) 0%, var(--color-1) var(--percent-1), var(--color-2) var(--percent-1), var(--color-2) var(--percent-2));
}

步骤2：组件类中定义动态变量 #

在ts组件类中定义需要动态更新的参数，占比、颜色变量后续可随时修改：

export class YourComponent {
  // 渐变颜色参数，可根据业务逻辑动态修改
  color1 = '#191489';
  color2 = 'rgba(25,20,137,0.2)';
  // 渐变占比参数，支持实时动态更新
  progressPercent = 94.7;
}

步骤3：模板中绑定CSS变量 #

在组件模板的目标元素上，将ts变量绑定到对应的CSS变量即可。
Angular 9及以上版本可直接用单变量绑定语法：

<div 
  class="target-element"
  [style.--color-1]="color1"
  [style.--color-2]="color2"
  [style.--percent-1]="progressPercent + '%'"
>
  元素内容
</div>

低版本Angular可用[ngStyle]批量绑定：

<div 
  class="target-element"
  [ngStyle]="{
    '--color-1': color1,
    '--color-2': color2,
    '--percent-1': progressPercent + '%'
  }"
>
  元素内容
</div>

后续需要调整参数时，直接修改ts中对应的变量值即可，样式会自动同步到伪元素。

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