At the moment, foor notes calls are made with <sup id="cite_ref-1" class="reference"> ... </sup>, multiple references are like <sup id="cite_ref-1" class="reference"> ... </sup><sup id="cite_ref-2" class="reference"> ... </sup><sup id="cite_ref-3" class="reference"> ... </sup>.

While it is easy to add/remove brackets using CSS:

sup.references:before {content: "[";}
sup.references:after {content: "]";}

It is more difficult to add separators because there is no way to catch the last element of that group, because there is no clear group:

sup.references:after {content: ",";}

:last-child or :last-of-type are not working because the group they are supposed to work on is not defined (a possible solution should be something like <span class="grouped-refs"><sup id="cite_ref-1" class="reference"> ... </sup><sup id="cite_ref-2" class="reference"> ... </sup><sup id="cite_ref-3" class="reference"> ... </sup></span>)

Here's JavaScript that does the trick:

$( function() {
	'use strict';
	$( '.reference' ).each( function( i, e ) {
		var next = $( e )[ 0 ].nextSibling;
		if ( next ) {
			if ( next.nodeType === 1 ) {
				if ( $( next ).hasClass( 'reference' ) ) {
					$( e ).after( '<sup class="cite_virgule">,</sup>' );
				}
			}
		}
	} );
} );

However, for this to work correctly, you would have to remove the reference class from Modèle:,. Otherwise, it would add commas after the commas that have been added manually.

Also, the styles in https://fr.wikipedia.org/wiki/MediaWiki:Common.css that target .reference and .exposant would have to be changed to include .cite_virgule so that the commas are on the same height as the references. Once this is done, it will work.

In T180361#3768722, @Nirmos wrote:

Here's JavaScript that does the trick:

$( function() {
	'use strict';
	$( '.reference' ).each( function( i, e ) {
		var next = $( e )[ 0 ].nextSibling;
		if ( next ) {
			if ( next.nodeType === 1 ) {
				if ( $( next ).hasClass( 'reference' ) ) {
					$( e ).after( '<sup class="cite_virgule">,</sup>' );
				}
			}
		}
	} );
} );

However, for this to work correctly, you would have to remove the reference class from Modèle:,. Otherwise, it would add commas after the commas that have been added manually.

Also, the styles in https://fr.wikipedia.org/wiki/MediaWiki:Common.css that target .reference and .exposant would have to be changed to include .cite_virgule so that the commas are on the same height as the references. Once this is done, it will work.

If it's in JavaScript, the commas won't show up for people who disabled Javascript on their browser and in the printed or PDF version of the article.

In T180361#3769662, @Thibaut120094 wrote:

In T180361#3768722, @Nirmos wrote:

Here's JavaScript that does the trick:

$( function() {
	'use strict';
	$( '.reference' ).each( function( i, e ) {
		var next = $( e )[ 0 ].nextSibling;
		if ( next ) {
			if ( next.nodeType === 1 ) {
				if ( $( next ).hasClass( 'reference' ) ) {
					$( e ).after( '<sup class="cite_virgule">,</sup>' );
				}
			}
		}
	} );
} );

However, for this to work correctly, you would have to remove the reference class from Modèle:,. Otherwise, it would add commas after the commas that have been added manually.

Also, the styles in https://fr.wikipedia.org/wiki/MediaWiki:Common.css that target .reference and .exposant would have to be changed to include .cite_virgule so that the commas are on the same height as the references. Once this is done, it will work.

If it's in JavaScript, the commas won't show up for people who disabled Javascript on their browser and in the printed or PDF version of the article.

Furthermore, the page will first be displayed without the commas waiting for the JS script to load. And when it execute, the apparition of commas could produce some visual glitches (FOUT).

Can't this be fixed with the adjacency selector ?

sup.reference + sup.reference:before {
  content: ',';
}

The only problem might be that this counts as styling, and it might confuse things like screenreaders, who possibly will just see a very high number like: 78910.
Alternatively, just always add <span class="cite_virgule">,</span> via the MediaWiki message and then use JS to add a class to the last in a series to hide the last comma.

Or we can adapt the parser to detect ref series/sequences and add extra classes to the first and the last ref in the series/sequence.

I think DJ's solution is pretty decent.