Comma-separated spans with pure CSS

Question

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.

I tried the following HTML and CSS.

VERSION 1

It shows commas for empty spans as well

.comma:not(:last-child):after {    content: ", ";  }

<span class="comma">A</span>  <span class="comma">B</span>  <span class="comma"></span>  <span class="comma">D</span>

VERSION 2

It shows a (visually) last comma if last span is empty.

.comma:not(:empty):not(:last-child):after {    content: ", ";  }

<span class="comma">A</span>  <span class="comma">B</span>  <span class="comma">C</span>  <span class="comma"></span>

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).

Answer 1

I reversed the logic, placing the comma as the content of before pseudoelement and I managed the case where also the first span can be empty.

.comma:not(:first-child) {   margin-left: -.3em;   }  .comma:first-child:empty ~ .comma:not(:empty) {   margin-left: 0;   }  .comma:first-child:empty ~ .comma:not(:empty) ~ .comma:not(:empty) {   margin-left: -.3em;   }  .comma:empty {   display: none; }  .comma:not(:first-child):before {   content: ", "; }  .comma:empty + .comma:not(:empty):before {   content : ""; }  .comma:not(:empty) ~ .comma:empty + .comma:not(:empty):before {   content : ", "; }

<div>    <span class="comma">A</span>   <span class="comma">B</span>    <span class="comma">C</span>   <span class="comma">D</span> </div>  <hr />  <div>   <span class="comma">A</span>   <span class="comma">B</span>    <span class="comma"></span>   <span class="comma">D</span> </div>  <div>   <span class="comma">A</span>   <span class="comma">B</span>    <span class="comma">C</span>   <span class="comma"></span> </div>  <div>   <span class="comma"></span>   <span class="comma">B</span>    <span class="comma">C</span>   <span class="comma">D</span> </div>  <div>   <span class="comma">A</span>   <span class="comma"></span>    <span class="comma">C</span>   <span class="comma">D</span> </div>  <div>   <span class="comma">A</span>   <span class="comma">B</span>    <span class="comma"></span>   <span class="comma"></span> </div>  <div>   <span class="comma">A</span>   <span class="comma"></span>    <span class="comma">C</span>   <span class="comma"></span> </div>  <div>   <span class="comma">A</span>   <span class="comma"></span>    <span class="comma"></span>   <span class="comma">D</span> </div>  <div>   <span class="comma"></span>   <span class="comma">B</span>    <span class="comma">C</span>   <span class="comma"></span> </div>  <div>   <span class="comma"></span>   <span class="comma">B</span>    <span class="comma"></span>   <span class="comma">D</span> </div>  <div>   <span class="comma"></span>   <span class="comma"></span>    <span class="comma">C</span>   <span class="comma">D</span> </div>  <div>   <span class="comma">A</span>   <span class="comma"></span>    <span class="comma"></span>   <span class="comma"></span> </div>  <div>   <span class="comma"></span>   <span class="comma">B</span>    <span class="comma"></span>   <span class="comma"></span> </div>  <div>   <span class="comma"></span>   <span class="comma"></span>    <span class="comma">C</span>   <span class="comma"></span> </div>  <div>   <span class="comma"></span>   <span class="comma"></span>    <span class="comma"></span>   <span class="comma">D</span> </div>  <hr /> All empty: <div>   <span class="comma"></span>   <span class="comma"></span>    <span class="comma"></span>   <span class="comma"></span> </div>

---

Further information about :empty pseudoclass available on MDN