Angular2 привязать анимацию к псевдоэлементу

Я пытаюсь использовать анимационную систему 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>

Однако я хочу привязать это к элементу pseudo before. Как я могу это сделать?

Ответ 1