title: Comma-separated spans with pure CSS
body: <p>I have - let's say - 4 spans on my page in a block. The content of each is populated by knockout from my viewmodel. Sometimes contents are empty for several spans. I would like to display them in a nice, comma-separated way, taking possible emptyness into account.</p>
  
  <p>I tried the following HTML and CSS.</p>
  
  <p>VERSION 1</p>
  
  <p>It shows commas for empty spans as well</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.comma:not(:last-child):after {
    content: ", ";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="comma"&gt;A&lt;/span&gt;
  &lt;span class="comma"&gt;B&lt;/span&gt;
  &lt;span class="comma"&gt;&lt;/span&gt;
  &lt;span class="comma"&gt;D&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>VERSION 2</p>
  
  <p>It shows a (visually) last comma if last span is empty.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.comma:not(:empty):not(:last-child):after {
    content: ", ";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="comma"&gt;A&lt;/span&gt;
  &lt;span class="comma"&gt;B&lt;/span&gt;
  &lt;span class="comma"&gt;C&lt;/span&gt;
  &lt;span class="comma"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How could I tweak it to render always correctly, no matter where the gaps are (if any)?
  I need to support only modern browsers (IE9+ and others).</p>