Come posso ottenere il mio tema Tumblr per separare i tag con virgole?

Alla fine di ogni tipo di post nel mio tema Tumblr, ho questo codice:

<p class="permalink">
   <a href="{Permalink}">{NoteCountWithLabel}</a>
   {block:HasTags} &nbsp;&nbsp; # filed under:
      {block:Tags}  
         <a href="{TagURL}">{Tag}</a>
      {/block:Tags}
   {/block:HasTags}
</p>

(So ​​che il  bit non è esattamente un atto di classe. Era la mia soluzione a quattro secondi, e non è lo scopo di questa domanda, quindi abbiate pazienza!)

Su un post con più tag, si ottiene:

Se aggiungo solo una virgola dopo {Tag}, facendola <a href="{TagURL}">{Tag},</a>, ottengo:

L'ultimo tag ha una virgola estranea e i post con un solo tag mostrerebbero anche la virgola extra con questo metodo.

Come faccio ad aggiungere il giusto numero di virgole?

Aggiornamento :

La risposta di Jeremy qui sotto ha fatto quello che volevo. Ma, nel tentativo di diventare "conforme agli standard" (anche se non so perché qualcuno che utilizza IE8 dovrebbe leggere il mio Tumblr), ho tentato di implementare il suggerimento di W3D. Quindi ora il CSS assomiglia a:

a.tag:before {
  content:", ";
}
a.tag:first-child:before {
  content:"";
}

Il risultato è ora:

( nb: l'interruzione di linea non è correlata - l'ho aggiunta apposta. )

Così. Che cosa è andato storto?

Ho un'altra idea.

{block:Tags}<a class="tag" href="{TagURL}">{Tag}</a><span class="tagtail"></span>{/block:Tags}

Ciò aggiungerà un intervallo con la classe "tagtail" dopo ogni tag.

Quindi, aggiungi questo css:

span.tagtail + a.tag:before {
   content:", ";
}

Questo selezionerà ogni tag anchor che viene dopo un arco di tagtail (quindi tutti tranne il primo). In questo modo, evitiamo la necessità di utilizzare i selettori del primo figlio o dell'ultimo figlio .

AGGIORNARE:

Se vuoi assicurarti che le virgole siano separate dall'ancora, suppongo che potresti anche fare:

{block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

e poi lo stile come:

span.taghead { display:none; }
a.tag + span.taghead { display:inline; }

Tuttavia, potrebbe essere necessario apportare modifiche poiché i browser differiscono per le regole di sostituzione.

Prova alcuni trucchi CSS (per farlo funzionare in IE 8, devi specificare un <! DOCTYPE> nella parte superiore del documento).

<p class="permalink">
       <a href="{Permalink}">{NoteCountWithLabel}</a>
       {block:HasTags} &nbsp;&nbsp; # filed under:
          {block:Tags}  
             <a class="tag" href="{TagURL}">{Tag}</a>
          {/block:Tags}
       {/block:HasTags}
</p>

Quindi, aggiungi il seguente CSS:

a.tag:after {
   content:",";
}

a.tag:last-child:after {
   content:"";
}

Utilizza lo pseudo-selettore : after e la proprietà content poco utilizzata per aggiungere la virgola dopo il fatto. La seconda regola sovrascrive la proprietà content per l'ultimo tag della sequenza.

A seguito della risposta di @ Jeremy ... Per supportare IE8 (e IE7) dovrai usare la first-childpseudo-classe, piuttosto che last-child. IE8 non supporta last-child, nemmeno in modalità conforme agli standard (cioè con un DOCTYPE).

a.tag:before {
   content:", ";    /* comma + space */
}

a.tag:first-child:before {
   content:"";
}

EDIT: Tuttavia, un leggero avvertimento con questo approccio è che probabilmente dovrai rimuovere qualsiasi spazio bianco aggiuntivo che appare dopo la chiusura </a>nel tuo markup / tema.

      {block:Tags}<a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

EDIT: Screenshot dell'output del violino in Safari 5.0 su OS X:

Basandosi sul :beforesuggerimento nelle risposte precedenti. Se stai lavorando con un elenco di tag è possibile che tu li inserisca in un elenco. Se usi ogni litag :beforeanziché con un tag all'interno del litag, ogni tag sarà il primo figlio del litag, tuttavia solo un litag sarà il primo figlio del tag ulo ol! Sto usando un elenco di descrizioni perché volevo inserire "Tag" nel dtag t, quindi lo stesso vale per il dtag d.

L'uso di un elenco di descrizioni presenta tuttavia una complessità aggiuntiva. Il primo ddtag non è mai il primo figlio del dltag, è il dttag, quindi è necessario utilizzarlo nth-child(2)come target. L' nth-child(2)aspetto negativo dell'utilizzo è che di nuovo non è conforme a IE 8, quindi il problema si ripresenta.

Ecco la mia soluzione

{block:HasTags}
<div class="t">
<dl>
<dt>Tags</dt>
{block:Tags}
<dd><a href="{TagURL}" class="tag">{Tag}</a></dd>
{/block:Tags}
</dl>
</div>
{/block:HasTags}

Anche dalle risposte precedenti suggeriscono che l'uso di uno spazio nel contenuto ( content: ", ";) funziona. Funziona? Non riesco a farlo funzionare ma "\ 00a0" lo farà.

.t dl {
    margin: 0px;
    list-style-type: none;
}
.t dt {
    margin: 0px 5px 0px 0px;
    float: left;
}
.t dd {
    margin: 0px;
    float: left;
}

.t dd:before {
    padding: 0px 5px 0px 0px;
    content: ",\00a0";
    float: left;
}

.t dd:nth-child(2):before {
    padding: 0px 0px 0px 0px;
    content: "";
    float: left;
}