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>

（ ビットがクラス行為ではないことはわかっています。これは私の4秒の回避策であり、この質問の目的ではないので、我慢してください！）

複数のタグがある投稿では、次の結果になります。

の後{Tag}にカンマを追加するだけで<a href="{TagURL}">{Tag},</a>、それを作成すると、次のようになります。

最後のタグには余分なカンマがあり、タグが1つだけの投稿でも、この方法では余分なカンマが表示されます。

適切な数のカンマを追加するにはどうすればよいですか？

更新：

以下のジェレミーの答えは私が望んだことをしました。しかし、しようとする試みで空想が得る「標準準拠」（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:", ";
}

これにより、タグテールスパンの後に来るすべてのタグアンカーが選択されます（最初のものを除くすべてのアンカー）。これにより、first -childセレクターまたはlast-childセレクターを使用する必要がなくなります。

更新：

コンマがアンカーとは別にスタイル設定されていることを確認したい場合は、次のようにすることもできます。

{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およびほとんど使用されないcontentプロパティを使用して、事実の後にコンマを追加します。2番目のルールは、シーケンスの最後のタグのコンテンツプロパティをオーバーライドします。

@Jeremyの回答に続いて... IE8（およびIE7）をサポートするにはfirst-child、ではなく疑似クラスを使用する必要がありますlast-child。IE8はlast-child、標準準拠モード（つまり、DOCTYPEを使用）でもサポートしません。

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

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

編集：ただし、このアプローチのわずかな注意点</a>は、マークアップ/テーマの終了後に表示される余分な空白をすべて削除する必要があることです。

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

編集： OS X上のSafari 5.0 でのフィドルの出力のスクリーンショット：

:before以前の回答の提案に基づいて構築します。タグのリストを使用している場合は、タグをリストに配置する可能性があります。タグ内のa liタグで:beforeはなく、で各タグを使用する場合、li各タグはタグの最初の子になりますが、or タグの最初の子になるのは1 liつのliタグだけです！「タグ」をtタグに配置するため、説明リストを使用しています。これは、dタグにも同じことが当てはまります。uloldd

ただし、説明リストを使用すると複雑さが増します。最初の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;
}