Làm cách nào để có được chủ đề Tumblr của tôi để tách các thẻ bằng dấu phẩy?

Ở cuối mỗi loại bài đăng trong chủ đề Tumblr của tôi, tôi đã nhận được mã này:

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

(Tôi biết  bit không chính xác là một hành động của lớp. Đó là cách giải quyết bốn giây của tôi và đó không phải là mục đích của câu hỏi này, vì vậy hãy đồng ý với tôi!)

Trên một bài đăng có nhiều thẻ, điều đó mang lại:

Nếu tôi chỉ thêm dấu phẩy sau {Tag}, tạo nó <a href="{TagURL}">{Tag},</a>, tôi nhận được:

Thẻ cuối cùng có dấu phẩy không liên quan và các bài đăng chỉ có một thẻ sẽ hiển thị thêm dấu phẩy theo phương pháp này.

Làm cách nào để thêm đúng số dấu phẩy?

Cập nhật :

Câu trả lời của Jeremy dưới đây đã làm những gì tôi muốn. Nhưng, trong một nỗ lực để có được sự ưa thích là "tuân thủ tiêu chuẩn" (mặc dù tôi không biết tại sao bất cứ ai sử dụng IE8 sẽ đọc tumblr của tôi), tôi đã cố gắng thực hiện đề xuất của w3d. Vì vậy, bây giờ CSS trông như:

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

Kết quả là ngay bây giờ:

( nb: ngắt dòng không liên quan - Tôi đã thêm vào mục đích. )

Vì thế. Có chuyện gì?

Tôi có một ý tưởng khác.

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

Điều này sẽ thêm một khoảng với lớp "tagtail" sau mỗi thẻ.

Sau đó, thêm css này:

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

Điều này sẽ chọn tất cả các thẻ neo mà đến sau một tagtail span (như vậy mỗi một nhưng là người đầu tiên). Bằng cách này, chúng tôi tránh sự cần thiết phải sử dụng bộ chọn con đầu tiên hoặc con cuối cùng .

CẬP NHẬT:

Nếu bạn muốn đảm bảo rằng dấu phẩy được tạo kiểu ngoài mỏ neo, tôi cho rằng bạn cũng có thể làm:

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

và sau đó tạo kiểu như:

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

Tuy nhiên, điều này có thể cần điều chỉnh vì các trình duyệt khác nhau về các quy tắc ghi đè.

Hãy thử một số thủ thuật CSS (để nó hoạt động trong IE 8, bạn cần chỉ định <! DOCTYPE> ở đầu tài liệu).

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

Sau đó, thêm CSS sau:

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

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

Nó sử dụng bộ chọn giả : sau và thuộc tính nội dung ít được sử dụng để thêm dấu phẩy sau thực tế. Quy tắc thứ hai ghi đè thuộc tính nội dung cho thẻ cuối cùng trong chuỗi.

Theo dõi câu trả lời của @ Jeremy ... Để hỗ trợ IE8 (và IE7), bạn sẽ cần sử dụng lớp first-childgiả, thay vì last-child. IE8 không hỗ trợ last-child, ngay cả trong chế độ tuân thủ tiêu chuẩn (ví dụ: với DOCTYPE).

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

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

EDIT: Tuy nhiên, một lưu ý nhỏ với cách tiếp cận này là bạn có thể sẽ phải xóa bất kỳ khoảng trắng bổ sung nào xuất hiện sau khi đóng </a>trong đánh dấu / chủ đề của bạn.

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

EDIT: Ảnh chụp màn hình đầu ra của fiddle trong Safari 5.0 trên OS X:

Dựa trên :beforegợi ý trong các câu trả lời trước. Nếu bạn đang làm việc với một danh sách các thẻ, hoàn toàn có khả năng bạn sẽ đặt chúng vào một danh sách. Nếu bạn sử dụng từng lithẻ :beforethay vì thẻ bên trong lithẻ - mỗi thẻ sẽ là con đầu tiên của lithẻ, tuy nhiên chỉ có một lithẻ sẽ là con đầu tiên của thẻ ulhoặc ol! Tôi đang sử dụng danh sách mô tả vì tôi muốn đặt "Thẻ" vàod thẻ t để áp dụng tương tự cho dthẻ d.

Tuy nhiên, sử dụng một danh sách mô tả có một sự phức tạp được thêm vào. ddThẻ đầu tiên không bao giờ là con đầu tiên của dlthẻ, đó là dtthẻ, vì vậy bạn cần sử dụngnth-child(2) để nhắm mục tiêu. Nhược điểm của việc sử dụng nth-child(2)là một lần nữa, nó không tuân thủ IE 8 nên vấn đề lại xuất hiện trở lại.

Đây là giải pháp của tôi.

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

Cũng từ các câu trả lời trước, họ đề xuất rằng sử dụng khoảng trắng trong nội dung ( content: ", ";) sẽ hoạt động. Nó có hoạt động không? Tôi không thể làm cho nó hoạt động nhưng "\ 00a0" sẽ.

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