Comment puis-je obtenir mon thème Tumblr pour séparer les balises avec des virgules?

À la fin de chaque type de message dans mon thème Tumblr, j'ai ce code:

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

(Je sais que le  bit n'est pas exactement un acte de classe. C'était ma solution de contournement de quatre secondes, et ce n'est pas le but de cette question, alors restez avec moi!)

Sur un post avec plusieurs tags, cela donne:

Si j'ajoute juste une virgule après la {Tag}création <a href="{TagURL}">{Tag},</a>, j'obtiens:

La dernière balise a une virgule superflue, et les publications avec une seule balise afficheraient également la virgule supplémentaire dans cette méthode.

Comment ajouter juste le bon nombre de virgules?

Mise à jour :

La réponse de Jeremy ci-dessous a fait ce que je voulais. Mais, pour essayer d' être fantaisiste "conforme aux normes" (bien que je ne sache pas pourquoi quiconque utilisant IE8 lirait mon tumblr), j'ai essayé de mettre en œuvre la suggestion de w3d. Alors maintenant, le CSS ressemble à:

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

Le résultat est maintenant:

( nb: le saut de ligne n'est pas lié - j'ai ajouté cela exprès. )

Donc. Qu'est ce qui ne s'est pas bien passé?

J'ai une autre idée.

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

Cela ajoutera une étendue avec la classe "tagtail" après chaque balise.

Ensuite, ajoutez ce css:

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

Cela sélectionnera chaque ancre de balise qui vient après une durée de balise (donc toutes sauf la première). De cette façon, nous évitons d'avoir à utiliser les sélecteurs premier enfant ou dernier enfant .

MISE À JOUR:

Si vous voulez vous assurer que les virgules sont stylées indépendamment de l'ancre, je suppose que vous pouvez également faire:

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

puis le coiffer comme:

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

Cependant, cela peut nécessiter des ajustements, car les navigateurs diffèrent sur les règles prioritaires.

Essayez quelques astuces CSS (pour le faire fonctionner dans IE 8, vous devez spécifier un <! DOCTYPE> en haut du document).

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

Ensuite, ajoutez le CSS suivant:

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

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

Il utilise le pseudo-sélecteur : après et la propriété de contenu peu utilisée pour ajouter la virgule après coup. La deuxième règle remplace la propriété de contenu de la dernière balise de la séquence.

Suite à la réponse de @ Jeremy ... Pour prendre en charge IE8 (et IE7), vous devrez utiliser la first-childpseudo-classe plutôt que last-child. IE8 ne prend pas en charge last-child, même en mode conforme aux normes (c'est-à-dire avec un DOCTYPE).

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

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

EDIT: Cependant, une légère mise en garde avec cette approche est que vous devrez probablement supprimer tout espace blanc supplémentaire qui apparaît après la fermeture </a>de votre balisage / thème.

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

EDIT: Capture d'écran de la sortie du violon dans Safari 5.0 sur OS X:

S'appuyant sur la :beforesuggestion des réponses précédentes. Si vous travaillez avec une liste de balises, il est fort possible que vous les placiez dans une liste. Si vous utilisez chaque libalise avec :beforeplutôt que la balise a à l'intérieur de la libalise - chaque balise sera le premier enfant de la libalise mais une seule libalise sera le premier enfant de la balise ulou ol! J'utilise une liste de description car je voulais mettre "Tags" dans la dbalise t donc la même chose s'applique à la dbalise d.

Cependant, l'utilisation d'une liste de descriptions présente une complexité supplémentaire. La première ddbalise n'est jamais le premier enfant de la dlbalise, c'est la dtbalise, vous devez donc l'utiliser nth-child(2)pour la cibler. L'inconvénient de l'utilisation nth-child(2)est qu'encore une fois il n'est pas conforme à IE 8, donc ce problème se reproduit.

Voici ma solution.

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

À partir des réponses précédentes, ils suggèrent également que l'utilisation d'un espace dans content ( content: ", ";) fonctionne. Est-ce que ça marche? Je ne peux pas le faire fonctionner mais "\ 00a0" le fera.

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