Whitespace appearing using CSS :after and :content

Issue

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"><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: ', ';
}

Solution

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.

Answered By - Spudley