Разделители между (возможно скрытими) span'ами
Решение, как обычно, нашлось там, где его никто не ждал. Надо использовать так называемый general sibling selector:

.item.active ~ .item.active:before {
    content: ', ';
}

В таком случае запятая вставляется только перед теми видимыми пунктами перечисления, до которых у того же родителя встречается другой видимый пункт.
Есть много способов эо сделать. зависит от требуемой кроссбраузерности и общей верстки данного блока. Уточните эти детали