title: How to style unordered lists in CSS as comma separated text
body: <p>I’m looking for a way to style an unordered list in XHTML with CSS such that it is rendered inline and the list items are separated by commas.</p>
  
  <p>For example, the following list should be rendered as <code>apple, orange, banana</code> (note the missing comma at the end of the list).</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul id="taglist"&gt;
    &lt;li&gt;apple&lt;/li&gt;
    &lt;li&gt;orange&lt;/li&gt;
    &lt;li&gt;banana&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Currently, I’m using the following CSS for styling this list, which almost does what I want, but renders the list as <code>apple, orange, banana,</code> (note the trailing comma after banana).</p>
  
  <pre class="lang-css prettyprint-override"><code>#taglist {
    display: inline;
    list-style: none;
  }
  
  #taglist li {
    display: inline;
  }
  
  #taglist li:after {
    content: ", ";
  }
  </code></pre>
  
  <p>Is there a way to solve this problem with pure CSS?</p>