如何在伪类上创建事件侦听器？Javascript

我需要单击伪类项上的事件侦听器。 我有一个按钮：

<button class="test" (click)="callFunction"> Test </button>

callFunction(){
    let clickedItem = getComputedStyle(document.querySelector('.dx-fa-button-label'), ':after').getPropertyValue('content');
    let clickedItem2 = getComputedStyle(document.querySelector('.dx-fa-button-label'), ':before').getPropertyValue('content');
    console.log('cliske Item ' , clickedItem2)
    if(clickedItem.includes("test")) {
      console.log('true')
    }else {
      console.log('no ')
}



  .dx-fa-button-label { 
    &:before {
      background : url(../../assets/aplikacija/presentation.png) no-repeat; 
      content : " test2 ";
      height: 28px;
      width: 35px;
      margin-right: 10px; 
      filter: invert(1); 
    }

    &:after {
      content: " test ";
      font-weight: 200;
      margin-left: 6px;
    }
  }

测试
callFunction（）{
让我们单击editem=getComputedStyle（document.querySelector（'.dx fa按钮标签'），':after'）。getPropertyValue（'content'）；
让我们单击EditEM2=getComputedStyle（document.querySelector（“.dx fa按钮标签”），“：before”）.getPropertyValue（'content'）；
console.log（'cliske Item'，clickedItem2）
如果（单击编辑项包括（“测试”））{
console.log（'true'）
}否则{
console.log（'no'）
}
.dx fa按钮标签{
&：之前{
背景：url（../../assets/aplikacija/presentation.png）不重复；
内容：“测试2”；
高度：28px；
宽度：35px；
右边距：10px；
过滤器：反转（1）；
}
&：之后{
内容：“测试”；
字号：200；
左边距：6px；
}
}

这是工作。我在console.log中得到了正确的结果，但我需要在单击内容之后，在单击内容之前，在单击内容之前，使用事件侦听器