Is there a way to put a comma between objects without being affected by :hover

i am looking for a way to map over an array and seperating objects by a comma, except for the last one. There are plenty of questions regarding this topic, but i am looking for a solution that doesn’t "bind" the comma before the rendered object, like:[About][, Other]
Instead of this i am looking for: [About], [Other] since i am using an hover-effect on these objects and dont want the comma to be affected.

I tried these solutions but first one is what i described above

<span key={index} className="filter-tag">{ (index ? ', ' : '') + tag }</span>

and the second one doesnt do anything – strangely:

  .filter-tag + .filter-tag::before {
    display: inline-block;
    white-space: pre;
    content: ", ";
  }

Has somebody another possibility for me, since i think there must be a pretty simple solution to this?
Thanks in regard for an help!

Edit: I would already be happy, if the comma can be glued to be after the object like [About, ]

>Solution :

have you tried this?

EDITED with Anthony’s comment

const arrayOfTags = [];


arrayOfTags.map((tag, index) => {
  return <span key={index}>{tag}{`${index === arrayOfTags.length - 1 ? '' : ', '}`}</span>
});

when your iterated index is equals to length of array, doesnt put any comma

you dont need to use css pseudo elements with this solution