Click here to Skip to main content
Click here to Skip to main content

Tagged as

Separating HTML list items by comma using CSS

, 23 Feb 2012
Rate this:
Please Sign up or sign in to vote.
Separating HTML list items by comma using CSS
Problem
 
In the HTML, we are displaying list of elements using the UL/LI structure. In some cases, we want to show a list of elements as an inline list separated by comma (,). We want to put list similar to the following structure:
 
<ul class="csv">
    <li>Serbia</li>
    <li>France</li>
    <li>UK</li>
    <li>Greece</li>
</ul>
 
In the programming languages, it is easy to create comma separated lists. After each item should be placed comma and the last comma at the end should be removed using some trim() function. However, in pure CSS, there is no trim function.
 
Solution
 
CSS code for creating comma separated lists is shown in the following code:
 
ul.csv { list-style: none; margin: 0; padding: 0; }
ul.csv li { display: inline; }
ul.csv li:after { content: ","; }
ul.csv li:last-child:after { content: ""; }
 
The first two lines put LI elements inline. The third line puts comma after each LI element. However, here is a problem because we will have one additional comma character at the end of the list, and we do not have trim() function.
Therefore, we are adding the fourth line that puts blank content after last LI element in the list.
This way you have true comma separated list implemented in pure CSS.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jovan Popovic
Architect Gowi
Serbia Serbia
Started as a young scientist - winning the highest national awards in mathematics, physics, electrotechnics, and electronics.
Graduated from Faculty of Electrical Engineering, Department of Computer Techniques and Informatics, University of Belgrade, Serbia, as a first in the class, as a Master of Software Sciences.
Currently working in Gowi as a Software engineer, architect, and project manager since 2004 - mostly using Microsoft technologies (ASP.NET, C#). Member of JQuery community - created few popular plugins (four popular JQuery DataTables add-ins and loadJSON template engine).
Interests: Software engineering process(estimation and standardization), mobile and business intelligence platforms.

Comments and Discussions

 
GeneralMy vote of 5 PinmemberMember 1074221517-Apr-14 5:07 
GeneralReason for my vote of 5 Nice one! PinmemberErnesto Oltra29-Feb-12 9:10 
GeneralReason for my vote of 5 Nice one Pinmembernikhi _singh24-Feb-12 18:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140814.1 | Last Updated 23 Feb 2012
Article Copyright 2012 by Jovan Popovic
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid