How to customize wordpress function: the tags?

Question

In my wordpress post I have included tags with using wordpress function

<?php the_tags( $before, $sep, $after ); ?> 

My actual Css :

.postclass{
  margin:10px 0px 10px 0px;
  }

.posttag{
  font-size:10px;
  float:left;
  color:#212121;
  margin-right:15px;
  padding:5px;
  border-radius:2px;
  background:black;
}

In my template:

<div class="postclass">
     <?php the_tags( '<p class="posttag">', ',', '</p>' ); ?>
</div>

This gives me all tags in same black background .How can I get each tag text with black background each separated by comma?

Answer 1

Following an example from here: http://codex.wordpress.org/Function_Reference/get_the_tag_list

<div class="postclass">
     <?php the_tags( '<p class="posttag">', '</p><p class="posttag">', '</p>' ); ?>
</div>

This will wrap all tags individually in <p class="posttag">[link]</p>.

Something closer to your jsfiddle:

PHP

<?php the_tags( '<ul class="postclass"><li>', ',</li><li>', '</li></ul>' ); ?>

CSS

ul.postclass li {
    float: left;
}
ul.postclass li a {
    padding: 5px;
    background-color: black;
}

With the_tags() you cannot customize the <a>-tag itself as in your jsfiddle. You can only wrap it. For achieving this you'll have to work with get_the_terms() which will return an array of tag-objects you can post-process.