How do I remove comma between category on summary block?

I'm looking for help with writing CSS code to achieve the following on my website

I successfully replaced comma with '|' pipe in my category summary blocks using CSS. However, this resulted in two pipes (' | | ') appearing between categories. How can I remove one of the pipes so only one displays between categories?

Here is the relevant CSS code I'm using:

Quote

.sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats {
  font-size: 0px !important;
}

.sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats a{
  font-size: 10px !important;
  font-family: 'Poppins';
}

.sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats :after {
  content: "|";
  visibility: visible;
  padding-left: 8px;
  padding-right: 8px;
}

 

Any guidance you can provide would be greatly appreciated. Thank you in advance for your help!

The problem is fixed by this code already
 

Quote

.sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats a:not(:last-child):after{
  content: "|";
  visibility: visible;
  padding-left: 8px;
  padding-right: 8px;
}