Partially comma separated lines with pure CSS

Question

I have - let's say - 4 spans on my page in a block. The content of each is filled out by knockout from my model. Sometimes the content is empty for several intervals. I would like to display them in a nice, comma separated way, given the possible void.

I tried the following HTML and CSS.

VERSION 1

It also shows commas for empty spaces.

.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 (visually) the last comma if the last space 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 can I set it to render always correctly, no matter where the spaces are (if any)? I need to support only modern browsers (IE9 + and others).

Answer 1

I canceled the logic by setting a comma as the contents of the before pseudo-element

Example: http://codepen.io/anon/pen/NPdbbw

 /* remove extra space before the comma */ .comma:not(:first-child) { margin-left: -.3em; } /* no need to display empty elements */ .comma:empty { display: none; } .comma:not(:first-child):before { content: ", "; } 

---

If the first .comma element may also be empty, then here is a more complex approach

http://codepen.io/anon/pen/BypQRd

 .comma:not(:first-child) { margin-left: -.3em; } /* next 2 rules are for spacing when the first .comma is empty too */ .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:not(:first-child):before { content: ", "; } .comma:empty + .comma:not(:empty):before { content : ""; } .comma:not(:empty) ~ .comma:empty + .comma:not(:empty):before { content : ", "; } 

The last example was successfully tested against all possible combinations of 4 elements.

---

Additional Information :empty pseudo-class available on MDN

Answer 2

Turn it on. Instead of placing a comma after your spaces, place it before each span that precedes (any distance back!) With a non-empty interval:

 .comma:not(:empty) ~ .comma:not(:empty):before { content: ", "; } 

Fiddle

Answer 3

http://jsfiddle.net/xtrabhwh/3/

 <span class="comma">A</span><span class="comma">B</span><span class="comma">C</span><span class="comma"></span> .comma ~ .comma:not(:empty):before { content: ", "; } 

Answer 4

The following should be done for almost any combination, without hiding anything.

 .comma:before { content: ',' } .comma:empty:before, .comma:first-of-type:before, .comma:first-of-type+.comma:empty:before, .comma:empty+.comma:not(:last-of-type):before, .comma:empty+.comma:empty:before { content: ''; } 

 <h4>Missing first</h4> <div> <span class="comma"></span> <span class="comma">item</span> <span class="comma">item</span> <span class="comma">item</span> </div> <h4>Missing last</h4> <div> <span class="comma"></span> <span class="comma">item</span> <span class="comma">item</span> <span class="comma">item</span> </div> <h4>Missing first two</h4> <div> <span class="comma"></span> <span class="comma"></span> <span class="comma">item</span> <span class="comma">item</span> </div> <h4>Missing last two</h4> <div> <span class="comma">item</span> <span class="comma">item</span> <span class="comma"></span> <span class="comma"></span> </div> <h4>Missing middle</h4> <div> <span class="comma">item</span> <span class="comma">item</span> <span class="comma"></span> <span class="comma">item</span> </div> <h4>Missing middle two</h4> <div> <span class="comma">item</span> <span class="comma"></span> <span class="comma"></span> <span class="comma">item</span> </div>