Jak uzyskać motyw Tumblr do oddzielania tagów przecinkami?

Na końcu każdego wpisu w moim motywie Tumblr mam następujący kod:

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

(Wiem, że ten  fragment nie jest dokładnie aktem klasowym. To było moje cztery drugie obejście i nie jest to celem tego pytania, więc proszę o wyrozumiałość!)

W poście z wieloma tagami daje:

Gdybym tylko dodać przecinek po {Tag}, co <a href="{TagURL}">{Tag},</a>, mam:

Ostatni znacznik ma obcy przecinek, a posty z tylko jednym znacznikiem pokazywałyby dodatkowy przecinek również w tej metodzie.

Jak dodać odpowiednią liczbę przecinków?

Aktualizacja :

Poniższa odpowiedź Jeremy'ego zrobiła, co chciałem. Ale próbując uzyskać fantazję „zgodności ze standardami” (chociaż nie wiem, dlaczego ktoś używający IE8 czytałby mój tumblr), próbowałem wdrożyć sugestię w3d. Teraz CSS wygląda następująco:

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

Wynik jest teraz:

( nb: podział linii nie ma związku - dodałem to celowo. )

Więc. Co poszło nie tak?

Mam inny pomysł.

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

To doda przęsło z klasą „tagtail” po każdym znaczniku.

Następnie dodaj ten css:

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

Spowoduje to wybranie każdej kotwicy tagu, która pojawia się po rozpiętości tagtail (czyli każda oprócz pierwszej). W ten sposób unikamy konieczności używania selektorów pierwszorzędnego lub ostatniego .

AKTUALIZACJA:

Jeśli chcesz się upewnić, że przecinki są stylizowane niezależnie od zakotwiczenia, myślę, że możesz także:

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

a następnie nadaj jej styl:

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

Może to jednak wymagać dostosowania, ponieważ przeglądarki różnią się nadrzędnymi regułami.

Wypróbuj sztuczki CSS (aby uruchomić go w IE 8, musisz określić <! DOCTYPE> na górze dokumentu).

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

Następnie dodaj następujący CSS:

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

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

Wykorzystuje pseudo-selektor : after i mało używaną właściwość content, aby dodać przecinek po fakcie. Druga reguła zastępuje właściwość content dla ostatniego znacznika w sekwencji.

Kontynuując odpowiedź @ Jeremy'ego ... Aby wesprzeć IE8 (i IE7), będziesz musiał użyć first-childpseudoklasy last-child. IE8 nie obsługuje last-child, nawet w trybie zgodnym ze standardami (tj. Z DOCTYPE).

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

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

EDYCJA: Jednak niewielkim zastrzeżeniem związanym z tym podejściem jest to, że prawdopodobnie będziesz musiał usunąć wszelkie dodatkowe białe znaki, które pojawią się po zamknięciu </a>znacznika / motywu.

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

EDYCJA: Zrzut ekranu wyjścia skrzypce w Safari 5.0 na OS X:

Opierając się na :beforesugestii z poprzednich odpowiedzi. Jeśli pracujesz z listą tagów, całkiem możliwe, że umieścisz je na liście. Jeśli użyjesz każdego litagu :beforezamiast tagu wewnątrz litagu - każdy tag będzie pierwszym dzieckiem litagu, jednak tylko jeden litag będzie pierwszym dzieckiem tagu ullub ol! Korzystam z listy opisów, ponieważ chciałem umieścić znaczniki „ dt ” w znaczniku t, więc to samo dotyczy dznacznika d.

Korzystanie z listy opisów ma jednak dodatkową złożoność. Pierwszy ddznacznik nigdy nie jest pierworodnym dlznacznika, jest to dtznacznik, więc musisz użyć go, nth-child(2)aby na niego celować. Wadą używania nth-child(2)jest to, że znowu nie jest zgodny z IE 8, więc problem pojawia się ponownie.

Oto moje rozwiązanie.

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

Również z poprzednich odpowiedzi sugerują, że użycie spacji w content ( content: ", ";) działa. Czy to działa? Nie mogę go uruchomić, ale „\ 00a0” zadziała.

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