CMS separator - add a comma between each item or exclude comma from last

[Jak]

Hey Folks!

I can’t crack this one alone, perhaps you have a better idea?

I’d like to display multiple authors on a blog post. This is set up as multi-reference field in the CMS (Blog-Post > Authors). What I would love to achieve is a header that says “Written by Author 1, Author 2, Author 3” (see image). Unfortunately, I cannot see a way to exclude the comma, from the last instance of the collection item.

I have tried overriding the styling using custom code, but not succeeded. e.g. Tryit Editor v3.7

<style> 
.seperator-hidden-last:nth-last-child(1 of .collection-item-7) {
  background: red;
}
</style>

Tryit Editor v3.7

Many thanks!

---

https://coworking-assembly.webflow.io/resources/day-passes-worth-2400-monthly

Here is my public share link: Webflow - UK Coworking Assembly

[mikeyevin]

Give the modified CSS below a try instead:

<style>
.collection-item-7:last-child .seperator-hidden-last {
  display: none;
}
</style>

You could also go with pseudo element’s instead of including the extra DOM element in your collection list, but you’d need to use just a bit more CSS:

<style>
.collection-item-7::after {
  content: ',';
  display: inline-block;
}
.collection-item-7:last-child::after {
  content: '';
}
</style>

I typically opt for the latter option in my projects as it’s not something a client normally needs to update and then you don’t have a rogue hidden element on the last item in the list.

Let me know if you run into any issues

[Jak]

@mikeyevin the last option is fantastic and works (nearly) perfectly, thanks so much!

I have modified it for more natural english by including “and” in the second from last position e.g. “Written by Author 1, Author 2 and Author 3”

My final issue is spacing. I can’t work out a smart way to add spaces before and after characters (   doesn’t work). any tips?

Here’s the current code:

<style>
.collection-item-7::after {
  content: ',' ;
  display: inline-block;
}
.collection-item-7:nth-last-child(2)::after {
  content: 'and';
}
.collection-item-7:last-child::after {
  content: '';
}
</style>

[mikeyevin]

Glad that worked out for you!

I didn’t mention this in my initial reply since you were spacing the items out from one another with margin, but you can add spaces as needed in the content value and prevent them from “collapsing” by changing the Breaking style property in the Designer:

If you’d like to do this within the same custom CSS you can do that instead with the (full) code shown below:

<style>
.collection-item-7 {
  white-space: pre;
}
.collection-item-7::after {
  content: ', ' ;
  display: inline-block;
}
.collection-item-7:nth-last-child(2)::after {
  content: ' and ';
}
.collection-item-7:last-child::after {
  content: '';
}
</style>

Just keep in mind that you’ll also probably want to clear any spacing you have set on the Collection Item 7 element as the spaces within the pseudo elements will handle that for you