milov.nl

Interaction design • webdevelopment • web art • photography

January 2005

How to display <ul> elements as a flat comma-separated list (now in effect in the main menu and links list in the left-hand column):

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

The advantage of this is that changing the default separator from a comma to | or - or whatever now means only having to change one character in the stylesheet.

Note: Internet Explorer doesn't support the css content attribute or :after and :last-child pseudo-classes, so the commas won't appear in IE.