Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Add Commas Between a List of Items Dynamically with CSS?
Lists that contain 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 add them manually. However, this can be time-consuming, particularly for long lists. Fortunately, CSS provides an excellent solution to add commas dynamically to lists of items.
Syntax
.item ~ .item::before {
content: ", ";
}
CSS Selectors Used
General Sibling Selector (~)
The ~ selector in CSS selects all elements that are preceded by a specified element and share the same parent.
element1 ~ element2 {
/* CSS declarations */
}
For example, .item ~ .item selects every element with class item that comes after another element with class item.
::before Pseudo-element
The ::before pseudo-element inserts content before the selected element's actual content.
element::before {
content: "text or symbol";
}
Example: Dynamic Comma-Separated List
The following example creates a horizontal list with commas automatically added between items using CSS
<!DOCTYPE html>
<html>
<head>
<style>
.items {
display: flex;
list-style: none;
padding: 0;
flex-wrap: wrap;
margin: 10px 0;
}
.item ~ .item::before {
content: ", ";
}
.item {
background-color: #f0f0f0;
padding: 5px 10px;
margin: 2px;
border-radius: 4px;
}
button {
margin: 5px;
padding: 8px 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h4>Dynamic Comma-Separated List</h4>
<ul class="items">
<li class="item">Eggs</li>
<li class="item">Bread</li>
<li class="item">Milk</li>
</ul>
<button onclick="addItem()">Add Item</button>
<button onclick="removeItem()">Remove Item</button>
<script>
function addItem() {
let itemList = document.querySelector(".items");
let item = document.createElement("li");
item.innerText = "New Item";
item.className = "item";
itemList.appendChild(item);
}
function removeItem() {
let items = document.querySelectorAll('.item');
if (items.length > 0) {
let idx = Math.floor(Math.random() * items.length);
items[idx].remove();
}
}
</script>
</body>
</html>
A horizontal list displays: "Eggs, Bread, Milk" with commas automatically inserted between items. Two buttons allow adding new items or removing random items, and the commas update dynamically.
How It Works
The CSS rule .item ~ .item::before targets every list item that comes after another list item. The ::before pseudo-element adds ", " (comma and space) before each subsequent item, effectively creating comma separation while leaving the first item without a preceding comma.
Key Benefits
- Automatic: Commas are added without manual insertion
- Dynamic: Works when items are added or removed via JavaScript
- Clean HTML: No need to include commas in the markup
-
Flexible: Easy to change separator by modifying the
contentproperty
Conclusion
Using CSS to dynamically add commas between list items is an elegant solution that improves code maintainability and visual presentation. The combination of the general sibling selector and ::before pseudo-element creates clean, automated comma separation without cluttering your HTML markup.
1K+ Views
