html - Whitespace appearing using CSS :after and :content -

i trying style output of wp_list_categories using css put commas in between items. however, there whitespace appearing before comma , cannot comprehend coming from!

i have made jsbin demonstrate , compare.

screenshot:

html:

<ul id="category-listing">     <li class="cat-item cat-item-6"><a href="#" title="view posts filed under branding">branding</a> </li>     <li class="cat-item cat-item-4"><a href="#" title="view posts filed under environment">environment</a> </li>     <li class="cat-item cat-item-5"><a href="#" title="view posts filed under exhibition">exhibition</a> </li>     <li class="cat-item cat-item-8"><a href="#" title="view posts filed under lecture">lecture</a> </li>     <li class="cat-item cat-item-9"><a href="#" title="view posts filed under photography">photography</a> </li>     <li class="cat-item cat-item-10"><a href="#" title="view posts filed under print">print</a> </li> </ul> 

css:

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

the white space appearing because there in html code.

the closing </li> tag on new line. carriage returns counted white space in html, , therefore have white space @ end of list item element.

the reason showing because you're using display:inline. when usign inline (or inline-block), white space relevant because inline means "treat element plain text", , therefore white space considered intentional part of text.

the best way rid of put </li> closing tag on same line rest of text, there no white space there.

there number of other ways around it, of them involve quite hacky css; closing space far easiest option.

the next best alternative switch using float:left instead of display:inline. deal problem, change way whole thing rendered, require make various other changes css compensate.