Whitespace appearing using CSS :after and :content - html

Question

I am trying to style the output of wp_list_categories using CSS to put commas in between items. However, there is a whitespace appearing before the comma and I seriously cannot comprehend where it is coming from!
I have made a jsbin to demonstrate and compare.
Screenshot:
HTML:
<ul id="category-listing">
<li class="cat-item cat-item-6">Branding
</li>
<li class="cat-item cat-item-4">Environment
</li>
<li class="cat-item cat-item-5">Exhibition
</li>
<li class="cat-item cat-item-8">Lecture
</li>
<li class="cat-item cat-item-9">Photography
</li>
<li class="cat-item cat-item-10">Print
</li>
</ul>
CSS:
li {
font-size: 46px;
display: inline;
margin: 0;
padding: 0;
}
#category-listing li:after {
content: ', ';
}

Answer 1

The white space is appearing because it is there in your HTML code.
The closing </li> tag is on a new line. Carriage returns are counted as white space in HTML, and therefore you have white space at the end of the list item element.
The reason it is showing up is because you're using display:inline. When usign inline (or inline-block), white space is relevant because inline means "treat this element as plain text", and therefore any white space is considered an intentional part of the text.
The best way to get rid of this is to simply put the </li> closing tag on the same line as the rest of the text, so that there is no white space there.
There are a number of other ways around it, but most of them involve quite hacky CSS; simply closing up the space is by far the easiest option.
The next best alternative is to switch to using float:left instead of display:inline. This will also deal with the problem, but will change the way the whole thing is rendered, which will require you to make various other changes to your CSS to compensate.

Answer 2

FLoating the anchor inside the list item will solve this issue:
li a {float:left;}

Answer 3

It is because you have spaces with inline display. You have two choices:
Remove spaces:
<ul id="category-listing">
<li class="cat-item cat-item-6">Branding
</li><li class="cat-item cat-item-4">Environment
</li><li class="cat-item cat-item-5">Exhibition
</li><li class="cat-item cat-item-8">Lecture
</li><li class="cat-item cat-item-9">Photography
</li><li class="cat-item cat-item-10">Print</li>
</ul>
Use float:
ul {overflow: hidden;}
ul li {float: left;}