Como faço para que meu tema do Tumblr separe as tags com vírgulas?

No final de cada tipo de post no meu tema do Tumblr, eu tenho esse código:

<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>

(Eu sei que a parte  não é exatamente um ato de classe. Foi a minha solução alternativa de quatro segundos, e não é o objetivo dessa pergunta, então tenha paciência comigo!)

Em uma postagem com várias tags, isso gera:

Se eu adicionar uma vírgula depois {Tag}, ao fazê-lo <a href="{TagURL}">{Tag},</a>, recebo:

A última tag possui uma vírgula estranha, e as postagens com apenas uma tag também mostrariam a vírgula extra nesse método.

Como adiciono o número certo de vírgulas?

Atualização :

A resposta de Jeremy abaixo fez o que eu queria. Mas, em uma tentativa de obter uma fantasia "compatível com os padrões" (embora eu não saiba por que alguém usando o IE8 leria meu tumblr), tentei implementar a sugestão do w3d. Então agora o CSS se parece com:

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

O resultado é agora:

( nb: a quebra de linha não está relacionada - eu adicionei isso de propósito. )

Assim. O que deu errado?

Eu tenho outra ideia.

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

Isso adicionará uma extensão à classe "tagtail" após cada tag.

Em seguida, adicione este css:

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

Isso selecionará todas as âncoras de tags que vêm após um período de tagtail (então, todas, exceto a primeira). Dessa forma, evitamos a necessidade de usar os seletores de primeiro filho ou último filho .

ATUALIZAR:

Se você deseja garantir que as vírgulas tenham um estilo separado da âncora, suponho que você também possa:

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

e depois estilize-o como:

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

No entanto, isso pode precisar de ajustes porque os navegadores diferem nas regras de substituição.

Experimente alguns truques CSS (para que ele funcione no IE 8, você precisa especificar um <! DOCTYPE> na parte superior do 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>

Em seguida, adicione o seguinte CSS:

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

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

Ele usa o pseudo-seletor : after e a propriedade de conteúdo pouco usada para adicionar a vírgula após o fato. A segunda regra substitui a propriedade content da última tag na sequência.

Seguindo a resposta de @ Jeremy ... Para dar suporte ao IE8 (e IE7), você precisará usar a first-childpseudo classe, em vez de last-child. O IE8 não suporta last-child, mesmo no modo compatível com os padrões (ou seja, com um DOCTYPE).

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

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

EDIT: No entanto, uma pequena ressalva nessa abordagem é que você provavelmente precisará remover qualquer espaço em branco adicional que aparecer após o fechamento </a>da sua marcação / tema.

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

EDIT: Captura de tela da saída do violino no Safari 5.0 no OS X:

Aproveitando a :beforesugestão nas respostas anteriores. Se você estiver trabalhando com uma lista de tags, é bem possível que você as coloque em uma lista. Se você usar cada litag com :beforee não a tag dentro da litag - cada tag será o primeiro filho da litag, no entanto, apenas uma litag será o primeiro filho da tag ulou ol! Estou usando uma lista de descrição, pois queria colocar "Tags" na dtag t, para que o mesmo se aplique à dtag d.

No entanto, a utilização de uma lista de descrição possui uma complexidade adicional. A primeira ddtag nunca é o primeiro filho da dltag, é a dttag, então você precisa usá nth-child(2)-lo para segmentá-la. A desvantagem de usar nth-child(2)é que, novamente, não é compatível com o IE 8, para que esse problema ocorra novamente.

Aqui está a minha solução.

{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}

Também a partir das respostas anteriores, eles sugerem que o uso de um espaço no conteúdo ( content: ", ";) funciona. Funciona? Não consigo fazê-lo funcionar, mas "\ 00a0" funcionará.

.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;
}