ฉันจะทำให้ธีม 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>ฉันได้รับ:

แท็กสุดท้ายมีเครื่องหมายจุลภาคที่ไม่เกี่ยวข้องและการโพสต์ที่มีเพียงหนึ่งแท็กจะแสดงเครื่องหมายจุลภาคพิเศษภายใต้วิธีนี้เช่นกัน

ฉันจะเพิ่มจุลภาคในจำนวนที่เหมาะสมได้อย่างไร

อัปเดต :

คำตอบของ Jeremy ด้านล่างทำในสิ่งที่ฉันต้องการ แต่ในความพยายามที่จะได้รับแฟนซีเป็น "มาตรฐานตามมาตรฐาน" (แม้ว่าฉันไม่รู้ว่าทำไมทุกคนที่ใช้ 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:", ";
}

สิ่งนี้จะเลือกสมอแท็กทุกอันที่เกิดขึ้นหลังจากช่วงหางของแท็ก ด้วยวิธีนี้เราหลีกเลี่ยงความต้องการใช้ตัวเลือกลูกคนแรกหรือลูกคนสุดท้าย

UPDATE:

หากคุณต้องการให้แน่ใจว่าเครื่องหมายจุลภาคแยกออกจากสมอฉันคิดว่าคุณสามารถทำได้:

{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 trickery (เพื่อให้มันทำงานได้ใน 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และคุณสมบัติเนื้อหาที่ใช้น้อยเพื่อเพิ่มเครื่องหมายจุลภาคหลังจากความจริง กฎข้อที่สองจะแทนที่คุณสมบัติเนื้อหาสำหรับแท็กสุดท้ายในลำดับ

ต่อจาก @ คำตอบของเจเรมี ... เพื่อสนับสนุน IE8 (และ IE7) คุณจะต้องใช้หลอกชั้นมากกว่าfirst-child last-childIE8 ไม่รองรับ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}

แก้ไข:ภาพหน้าจอของผลลัพธ์ซอใน 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;
}