angular - Angular2 アニメーションを疑似要素にバインドする

Question

疑似要素に Angular2 アニメーション システムを使用しようとしています:before。アニメーション フローに従って、アニメーションの状態を定義する必要があります。

animations: [
trigger('heroState', [
  state('inactive', style({
    backgroundColor: '#eee',
    transform: 'scale(1)'
  })),
  state('active',   style({
    backgroundColor: '#cfd8dc',
    transform: 'scale(1.1)'
  })),
  transition('inactive => active', animate('100ms ease-in')),
  transition('active => inactive', animate('100ms ease-out'))
])]

次に、次のように DOM 要素にアタッチします。

<ul>
<li *ngFor="let hero of heroes"
    [@heroState]="hero.state"
    (click)="hero.toggleState()">
  {{hero.name}}
</li>

beforeただし、これを擬似要素にアタッチしたい。どうやってやるの？