How to Add Commas Between a List of Items Dynamically with CSS

Suppose you have a list of items such as fruits: bananas, apples, oranges, pears, nectarines.

We can add commas (,) directly in HTML, but let's see how it can be implemented in CSS, which gives us more control. At the same time, we also need to make sure that the last item has no commas.

I recently needed this feature in a real project, part of the requirement is that any project in the list can be hidden/displayed via JavaScript. Regardless of which items are currently displayed, the comma needs to be displayed correctly.

A rather elegant solution I found is to use a universal sibling combinator. We'll discuss this later. Let's start with some sample HTML. Suppose you start with a fruit list:

<code></code>

• banana
• apple
• orange
• pear
• nectarine

And some basic CSS to make it appear as a list:

.fruits {
  display: flex;
  padding-inline-start: 0;
  list-style: none;
}

.fruit {
  display: none; /* hide by default*/
}
.fruit.on { /* Class added by JavaScript, used to display list items*/
  display: inline-block;
}

Now, suppose something happens inside this interface, such as the user switches controls to filter out all the fruit that grows in cold climates. Now the different fruit sets are displayed, so the fruit.on class uses the classList API to operate.

So far, our HTML and CSS will create a list like this:

<code>香蕉橙子油桃</code>

Now we can add commas and spaces between any two on elements using a universal sibling combiner:

.fruit.on ~ .fruit.on::before {
  content: ', ';
}

good!

You might be wondering: Why not just apply a comma to all list items and then remove it from the last item with something like:last-child or:last-of-type? The problem with this is that the last child element may be in a "closed" state at any given time. So what we really want is the last project in "open" state, which is not easy to implement in CSS, because there is no such thing as "last of class" available. Therefore, general-purpose combinator tricks are used!

In the UI, I used max-width instead of display, and switched it between 0 and a reasonable maximum so I could use the transition to show and hide items more naturally, making it easier for users to see which items are being added to or removed from the list. You can also add the same effect to the pseudo-element to make it super smooth.

Here is a demo with a few slightly different examples. The fruit example uses hidden classes instead of on classes, while the vegetable example has animated effects. SCSS is also used for nesting:

I hope this helps others looking for a similar solution!

The above is the detailed content of How to Add Commas Between a List of Items Dynamically with CSS. For more information, please follow other related articles on the PHP Chinese website!