Output collection list as comma separated list

Design help General
7

You could set the home-portfolio-service-collection to display block and then set the collection items to display: inline-block (or set both the collection item and the text block to inline)

image

Extra punctuation bonus:

Give your elements the following class names:

image

Change your CSS to:

	.home-portfolio-service-collection-item:after {
  content: ', ';
  }
  .home-portfolio-service-collection-item:last-child:after {
  content: '.';
  }
  
  .home-portfolio-service-collection-item:last-child:before { content: "and "; }
  .home-portfolio-service-collection-item:first-child:before { content: ""; }

</style>

and set both the collection item and the text to inline |A| will give you an Oxford comma and a full stop.
image

1 Like