+ selector wenn dazwischen Text ist

[Jeena Paradies]

Hallo,

Ich habe folgendes HTML:

<p class="message">  
 <a class="name" href="#">Jeena</a> <a class="name" href="#">Jonas</a>  
 <a class="name" href="#">ePirat</a> on behalf of all current and future  
 users i would like to thank god(s)-ish, the academy, the tent crew, the  
 developers, and particularly the Jonas for pointing out the direct line  
 what led me to that success! /cc <a class="name" href="#">Klaus</a>  
 <a class="name" href="#">Peter</a>  
</p>

Ich würde da jetzt sehr gerne dass daraus optisch so etwas wird:

---------
Jeena, Jonas, ePirat on behalf of all current and future users i would like
to thank god(s)-ish, the academy, the tent crew, the developers, and
particularly the Jonas for pointing out the direct line what led me to
that success! /cc Klaus, Peter
---------

Ich würde also gerne zwischen die Links mit der Klasse name an das vorherige Wort ein Komma dranhängen, am liebsten mit CSS, aber ansonsten auch mit Hilfe von JavaScript oder so.

Ich habe schon das hier probiert:

.name + .name:before {  
 content: ", ";  
 margin-left: -0.3em;  
}

Aber das hat sehr viele Probleme, das größte ist dass das Komma auch drangehängt wird wenn anderer Text zwischen den zwei Namen ist, der nicht in einem Link mit der Klasse name ist, das sieht dann sehr doof aus:

---------
Jeena and, Peter are sitting in the kitchen.
---------

Warum das passiert ist mir klar, weil die spec von Siblings spricht, was die ja auch sind, und der Text dazwischen zwar im DOM ein extra Knoten ist aber trotzdem ist das das erste Geschwister dass danach kommt.

Ideen?

Jeena