¿Cómo puedo hacer que mi tema Tumblr separe las etiquetas con comas?

Al final de cada tipo de publicación en mi tema de Tumblr, tengo este 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>

(Sé que la  parte no es exactamente un acto de clase. Fue mi solución alternativa de cuatro segundos, y no es el propósito de esta pregunta, ¡así que tengan paciencia conmigo!)

En una publicación con varias etiquetas, eso produce:

Si solo agrego una coma después {Tag}, haciéndolo <a href="{TagURL}">{Tag},</a>, obtengo:

La última etiqueta tiene una coma extraña, y las publicaciones con una sola etiqueta también mostrarían la coma adicional bajo este método.

¿Cómo agrego la cantidad correcta de comas?

Actualización :

La respuesta de Jeremy a continuación hizo lo que quería. Pero, en un intento por ponerme elegante "cumplir con los estándares" (aunque no sé por qué alguien que usa IE8 leería mi tumblr), intenté implementar la sugerencia de w3d. Entonces ahora el CSS se ve así:

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

El resultado es ahora:

( Nota: el salto de línea no está relacionado, lo agregué a propósito ) .

Entonces. ¿Qué salió mal?

Tengo otra idea

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

Esto agregará un lapso con la clase "tagtail" después de cada etiqueta.

Luego, agregue este css:

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

Esto seleccionará cada ancla de etiqueta que viene después de un lapso de cola de etiqueta (por lo tanto, todos menos el primero). De esta forma, evitamos la necesidad de usar los selectores de primer hijo o último hijo .

ACTUALIZAR:

Si desea asegurarse de que las comas tengan un estilo aparte del delimitador, supongo que también podría hacer lo siguiente:

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

y luego peinarlo así:

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

Sin embargo, esto podría necesitar ajustes porque los navegadores difieren en las reglas de anulación.

Pruebe algunos trucos CSS (para que funcione en IE 8, debe especificar un <! DOCTYPE> en la parte superior 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>

Luego, agregue el siguiente CSS:

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

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

Utiliza el pseudo-selector : after y la propiedad de contenido poco utilizada para agregar la coma después del hecho. La segunda regla anula la propiedad de contenido para la última etiqueta en la secuencia.

Siguiendo la respuesta de @ Jeremy ... Para admitir IE8 (e IE7) necesitará usar la first-childpseudo-clase, en lugar de last-child. IE8 no es compatible last-child, incluso en modo compatible con los estándares (es decir, con un DOCTYPE).

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

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

EDITAR: Sin embargo, una pequeña advertencia con este enfoque es que probablemente tendrá que eliminar cualquier espacio en blanco adicional que aparezca después del cierre </a>en su marcado / tema.

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

EDITAR: captura de pantalla de la salida del violín en Safari 5.0 en OS X:

Sobre la base de la :beforesugerencia en respuestas anteriores. Si está trabajando con una lista de etiquetas, es muy posible que las coloque en una lista. Si utiliza cada lietiqueta con una etiqueta en :beforelugar de una dentro de la lietiqueta, cada etiqueta será el primer elemento secundario de la lietiqueta, sin embargo, solo una lietiqueta será el primer elemento secundario de la etiqueta ulo ol. Estoy usando una lista de descripción, ya que quería poner "Etiquetas" en la detiqueta t, por lo que lo mismo se aplica a la detiqueta d.

Sin embargo, el uso de una lista de descripción tiene una complejidad adicional. La primera ddetiqueta nunca es el primer hijo de la dletiqueta, es la dtetiqueta, por lo que debe usarla nth-child(2)para orientarla. La desventaja de usar nth-child(2)es que nuevamente no es compatible con IE 8, por lo que el problema vuelve a surgir.

Aquí está mi solución.

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

También de las respuestas anteriores sugieren que usar un espacio en content ( content: ", ";) funciona. ¿Funciona? No puedo hacer que funcione, pero "\ 00a0" lo hará.

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