Spaces that appear using CSS: after and: content

Question

I am trying to create wp_list_categories output using CSS to put commas between items. However, a space appears before the comma, and I seriously cannot understand where it comes from!

I demonstrated and compared jsbin .

Screenshot:

HTML:

 <ul id="category-listing"> <li class="cat-item cat-item-6"><a href="#" title="View all posts filed under Branding">Branding</a> </li> <li class="cat-item cat-item-4"><a href="#" title="View all posts filed under Environment">Environment</a> </li> <li class="cat-item cat-item-5"><a href="#" title="View all posts filed under Exhibition">Exhibition</a> </li> <li class="cat-item cat-item-8"><a href="#" title="View all posts filed under Lecture">Lecture</a> </li> <li class="cat-item cat-item-9"><a href="#" title="View all posts filed under Photography">Photography</a> </li> <li class="cat-item cat-item-10"><a href="#" title="View all posts filed under Print">Print</a> </li> </ul> 

CSS

 li { font-size: 46px; display: inline; margin: 0; padding: 0; } #category-listing li:after { content: ', '; } 

Answer 1

White space appears because it is present in your HTML code.

The closing tag </li> is in a new line. Carriage returns are considered spaces in HTML, and so you have a space at the end of the list item.

The reason it appears is because you use display:inline . When usign is inline (or inline-block ), whitespace matters because inline means "treat this element as plain text" and therefore any free space is considered an intentional part of the text.

The best way to get rid of this is to simply put the close tag </li> in the same line as the rest of the text so that there are no spaces.

There are many other ways, but most of them involve pretty hacked CSS; just closing the space is the easiest option.

The next best alternative is to switch to using float:left instead of display:inline . This will also affect the problem, but it will change the way you render everything that requires you to make other changes to the CSS to compensate.

Answer 2

Absorbing an anchor inside a list item will solve this problem:

 li a {float:left;} 

Answer 3

This is because you have spaces with inline mapping. You have two options:

• Remove spaces:

   <ul id="category-listing"> <li class="cat-item cat-item-6"><a href="#" title="View all posts filed under Branding">Branding</a> </li><li class="cat-item cat-item-4"><a href="#" title="View all posts filed under Environment">Environment</a> </li><li class="cat-item cat-item-5"><a href="#" title="View all posts filed under Exhibition">Exhibition</a> </li><li class="cat-item cat-item-8"><a href="#" title="View all posts filed under Lecture">Lecture</a> </li><li class="cat-item cat-item-9"><a href="#" title="View all posts filed under Photography">Photography</a> </li><li class="cat-item cat-item-10"><a href="#" title="View all posts filed under Print">Print</a></li> </ul> 

• Use float :

   ul {overflow: hidden;} ul li {float: left;}