Pseudo elements with dynamic listing

I’m trying to find a workaround for the .div:not(:last-child):after pseudo element.

@vincent : I understand that there’s probably no support for that yet, but I was reading a thread where you asked @samliew for a fix when using dynamic list? Any update there?

I have a dynamic list and I just want to separate the items with a ", "…except the last child item of course.

Any help?!

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/jeff-close-77dc06?utm_medium=preview_link&utm_source=designer&utm_content=jeff-close-77dc06&preview=a9bec5c01e4049a7dece11e8c62fee8c&mode=preview
(how to share your site Read-Only link)

Place 2 paragraphs on your CMS item. One for the dynamic text, one for the comma. So the coma one will be static (so you have to remove all the commas from your CMS items in the database).

Give the paragraph with the comma a unique class, like .cms-comma.
Give the Collection Item a combo class .clients so your rule won’t apply to any list in the page.

No let’s target the .cms-comma element inisde of the LAST CHILD of the collection list.

.collection-item.clients:last-child .cms-comma {display:none}

Should work.

Thanks! this worked. Now I’m just trying to figure out how to display a static text block outside of the collection list, and the two text blocks within to all display as one long running paragraph. Any ideas?

display:inline for the text blocks

@vincent they are all set to inline, but for some reason they are still displaying as a vertical list. Any thoughts?