Як можна змусити тему Tumblr розділити теги комами?

Наприкінці кожного типу публікації в моїй Tumblr темі я отримав цей код:

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

(Я знаю, що  біт - це не зовсім класний вчинок. Це було моє чотири секунди вирішення проблеми, і це не мета цього питання, тож поводьтеся зі мною!)

У публікації з кількома тегами, яка дає:

Якщо я просто додаю кому після {Tag}, роблячи це <a href="{TagURL}">{Tag},</a>, я отримую:

Останній тег має сторонні коми, а публікації, що містять лише один тег, також відображатимуть додаткову кому відповідно до цього методу.

Як додати лише потрібну кількість коми?

Оновлення :

Відповідь Джеремі нижче робила те, що я хотів. Але, намагаючись зробити фантазію "сумісною зі стандартами" (хоча я не знаю, чому хтось, хто використовує IE8, прочитав би мою tumblr), я спробував реалізувати пропозицію w3d. Отже, тепер CSS виглядає так:

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

Результат зараз:

( nb: розрив рядка не пов'язаний - я додав це спеціально. )

Так. Що пішло не так?

У мене є інша ідея.

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

Це додасть проміжок класу "tagtail" після кожного тегу.

Потім додайте цей css:

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

Це буде вибирати кожен тег якір , який приходить після tagtail проміжку (так кожен , але перший). Таким чином ми уникаємо необхідності використання селекторів першої дитини чи останніх дітей .

ОНОВЛЕННЯ:

Якщо ви хочете переконатися, що коми розміщені окремо від якоря, я думаю, ви також можете зробити:

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

а потім накреслити його так:

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

Однак для цього може знадобитися налаштування, оскільки браузери відрізняються від переважаючих правил.

Спробуйте деякі хитрості CSS (щоб він працював у IE 8, вам потрібно вказати <! DOCTYPE> у верхній частині документа).

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

Потім додайте наступний CSS:

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

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

Він використовує псевдоселектор : after і мало використовуваний властивість вмісту для додавання коми після факту. Друге правило переосмислює властивість вмісту для останнього тегу в послідовності.

Випливаючи з відповіді @ Jeremy ... Щоб підтримати IE8 (і IE7), вам потрібно використовувати first-childпсевдоклас, а не last-child. IE8 не підтримує last-childнавіть у режимі, сумісному стандартам (тобто з DOCTYPE).

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

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

EDIT: Однак, невеликий застереження при такому підході полягає в тому, що вам, мабуть, доведеться видалити будь-який додатковий пробіл, який з’явиться після закриття </a>вашої розмітки / теми.

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

EDIT: Знімок екрана виводу скрипки в Safari 5.0 на OS X:

Спираючись на :beforeпропозицію в попередніх відповідях. Якщо ви працюєте зі списком тегів, цілком можливо, що ви будете розміщувати їх у списку. Якщо ви використовуєте кожен liтег, :beforeа не тег всередині liтегу - кожен тег буде першим дочірнім liтегом, проте лише один liтег буде першим дочірнім ulабо olтегом! Я використовую список описів, як хотів помістити "Теги" в dтег t, щоб те саме стосувалося dтегу d.

Однак використання списку описів має додаткову складність. Перший ddтег ніколи не є першим дочірнім dlтегом, це dtтег, тому його потрібно використовувати nth-child(2)для націлювання на нього. Мінус використання nth-child(2)полягає в тому, що знову ж таки це не сумісно з IE 8, тому проблема виникає знову.

Ось моє рішення.

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

Також з попередніх відповідей вони припускають, що використання пробілу у вмісті ( content: ", ";) працює. Це працює? Я не можу змусити його працювати, але "\ 00a0" буде.

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