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

Lists that contains multiple items are frequently used in websites, and separating them with commas can help enhance readability and user experience. The conventional method of adding commas to lists is to do add them manually. However as you might have already guessed this can be an arduous and time-consuming process, particularly for long lists. Fortunately, the ability to add commas dynamically to lists of items with CSS is an excellent solution.

~ Selector

The ~ selector in CSS is used to select all the elements in the HTML DOM which are preceded by the desired element.


el1~el2 {
   css declarations

In this context, "el1" symbolizes the preceding component of the fellow components, whereas "el2" represents the subsequent fellow components located in a shared parental unit.

For example, a ~ ul, selects every <ul> element preceded by the <a> element.

::before Selector

The ::before selector is used to insert come content before the selected element.


el::before {
   css declarations

Here, el is the element that the ::before pseudo-element will be applied to. The ::before pseudo-element is preceded by two colons (::) to distinguish it from the :before pseudo-class, which is an older syntax that is still supported for backward compatibility.

For example, p::before will add content before the <p> element.


The approach to add commas between a list of items dynamically with CSS involves the use of a pseudo-element called ::before that can insert content before the selected element. In this case, we target the li elements within a ul list and add a comma before each one using the ::before selector. This method allows us to avoid manually adding commas to the list and automate the process with CSS. Additionally, we can use the display and flex-wrap properties to arrange the list items and ensure they wrap to a new line if necessary. Finally, we can use JavaScript to add and remove list items dynamically.


The following code dynamically adds commas between a list of items using CSS. The document includes a title, style tag with CSS properties, and a div tag containing a heading, a list of items with the class name of "item", and two buttons for adding and removing items. The style tag includes a pseudo-element selector that adds a comma and space before each list item except for the first one. The script tag defines two functions; addItem function adds a new list item with the text "Item!" and the removeItem function selects a list item at random and removes it.

<!DOCTYPE html>
      .items {
         display: flex;
         list-style: none;
         padding: 0;
         flex-wrap: wrap
      .item~.item::before {
         content: ", ";
   <h4>How to Add Commas Between a List of Items Dynamically with CSS?</h4>
      <ul class="items">
         <li class="item">Eggs</li>
         <li class="item">Bread</li>
      <button onclick="addItem()">Add Item</button>
      <button onclick="removeItem()">Remove Item</button>
      function removeItem(){
         let items=document.querySelectorAll('.item');
         let idx=Math.floor(Math.random()*items.length);
      function addItem(){
         let itemList=document.querySelector(".items");
         let item=document.createElement("li");


To summarize, the utilization of CSS for the dynamic inclusion of commas amidst a string of articles is a clever stratagem that has the ability to enhance the readability and visual attractiveness of your web page. By utilizing the seldom-used proficiencies of CSS, web designers can attain sophisticated resolutions to seemingly trivial issues. By exercising imagination and an eagerness to explore novel possibilities, you can harness the potency of CSS to fabricate compelling and artistically magnificent web designs that will leave a lasting impact on your spectators. Therefore, do not hesitate to experiment with the myriad of tools and techniques at your disposal, and unleash the complete potential of your web development expertise.

Updated on: 10-Apr-2023


Kickstart Your Career

Get certified by completing the course

Get Started