inline list li:last-child:after { content: ", "} Can I get rid of the extra space it creates???

Question

http://forumgallery.rollinleonard.com/artists.php

I can't seem to get rid of the SPACE before the COMMA in my list.

It makes no sense!

Here is the relevant part of my CSS

.artistlist {
    margin: 0px;
    padding: 0;
    }

li.artistlist {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: .75em;
    line-height: 1.5em;
    word-spacing: 1px;
    }
li.artistlist:after {
    content:", ";
    }
.artistlist li:last-child:after {
    content:"";
    }
ul li{
    margin:0;
}

Answer 1

I did a small demo with less CSS code that renders without a whitespace before the comma. Tested in Chrome and Firefox on Mac.

Looked at your updated page and found the problem with it. Read more about possible whitespace bugs within different browsers here: http://www.42inc.com/~estephen/htmlner/whitespacebugs.html

Your html looks like this:

<li class="artistlist"> 
     <a href="#" onMouseOver="ShowDiv('artist_2_1');ShowDiv('artist_2_2');ShowDiv('artist_2_3'); return false;" onMouseOut="HideDiv('artist_2_1'); HideDiv('artist_2_2'); HideDiv('artist_2_3'); return false;" class="inlinelistlink display">Davis Cone</a> 
        </li> 

Try to remove the whitespace between your tags and it renders fine:

<li class="artistlist"><a href="#"  onMouseOver="ShowDiv('artist_2_1');ShowDiv('artist_2_2');ShowDiv('artist_2_3'); return false;" onMouseOut="HideDiv('artist_2_1'); HideDiv('artist_2_2'); HideDiv('artist_2_3'); return false;" class="inlinelistlink display">Davis Cone</a></li>