CSS Comma-separated Lists

If you’re writing semantic HTML, a list should be an HTML list.  But what if you want to display it as a comma-separated list of values?

Here’s our HTML.

<ul class="example">
	<li>Item One</li>
	<li>Item Two</li>
	<li>Item Three</li>
</ul>

Here’s the CSS.

ul.example {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.example li {
	display: inline;
}
ul.example li:after {
	content: ", ";
}
ul.example li:last-child:after {
	content: "";
}

And here’s the result.

  • Item One
  • Item Two
  • Item Three

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>