How can I get my Tumblr theme to separate tags with commas?

Question

At the end of every post type in my Tumblr theme, I've got this code:

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

(I know the   bit is not exactly a class act. It was my four second workaround, and it's not the purpose of this question, so bear with me!)

On a post with multiple tags, that yields:

If I just add a comma after {Tag}, making it <a href="{TagURL}">{Tag},</a>, I get:

The last tag has an extraneous comma, and posts with only one tag would show the extra comma under this method, as well.

How do I add just the right number of commas?

---

Update:

Jeremy's answer below did what I wanted. But, in an attempt to get fancy be "standards-compliant" (though I don't know why anyone using IE8 would read my tumblr), I attempted to implement w3d's suggestion. So now the CSS looks like:

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

The result is now:

(n.b.: the line break is unrelated - I added that on purpose.)

So. What went wrong?

Answer 1

I've got another idea.

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

This will add a span with the "tagtail" class after every tag.

Then, add this css:

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

This will select every tag anchor that comes after a tagtail span (so every one but the first). This way, we avoid the need to use the first-child or last-child selectors.

---

UPDATE:

If you want to ensure that the commas are styled apart from the anchor, I suppose you could also do:

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

and then style it like:

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

However, this might need tweaking because browsers differ on overriding rules.

Answer 2

Try some CSS trickery (to get it to work in IE 8, you need to specify a <!DOCTYPE> at the top of the document).

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

Then, add the following CSS:

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

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

It uses the pseudo-selector :after and the little-used content property to add the comma after the fact. The second rule overrides the content property for the last tag in the sequence.

Answer 3

Following on from @Jeremy's answer... To support IE8 (and IE7) you will need to use the first-child pseudo-class, rather than last-child. IE8 does not support last-child, even in standards compliant mode (ie. with a DOCTYPE).

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

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

EDIT: However, a slight caveat with this approach is that you will probably have to remove any additional white-space that appears after the closing </a> in your markup/theme.

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

EDIT: Screenshot of output of fiddle in Safari 5.0 on OS X:

Answer 4

Building on the :before suggestion in previous answers. If you are working with a list of tags it's quite possible that you will be placing them in a list. If you do use each li tag with :before rather than the a tag inside the li tag - each tag will be the first-child of the li tag however only one li tag will be the first-child of the ul or ol tag! I am using a description list as I wanted to put "Tags" in the dt tag so the same applies to the dd tag.

Using a description list however has an added complexity however. The first dd tag is never the first-child of the dl tag, it's the dt tag, so you need to use nth-child(2) to target it. The downside of using nth-child(2) is that again it's not IE 8 compliant so that issue comes around again.

Here's my solution.

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

Also from previous answers they suggest that using a space in content (content: ", ";) works. Does it work? I can't get it to work but "\00a0" will.

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