On a site I’m currently working on, it seemed best to display an OL as a list in sentence form.
For example:
<ul class="commaList"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul>
Would display as: One, two, three and four.
In case this CSS is of any use to anyone else, I’ve published it as a snippet below.
Please note this uses pseudo-selectors and so will not work in IE, but will gracefully degrade.
/* display ordered list as comma list */
.commaList li:first-child {
text-transform: capitalize;
}
.commaList li:after{
content: ',';
padding-right: 5px;
}
.commaList li:nth-last-child(2):after {
content: '';
padding-right: 5px;
}
.commaList li:last-child:before {
content: 'and ';
padding-right: 0;
}
.commaList li:last-child:after {
content: '.';
clear: both;
}
/* this prevents single item lists from containing commas and 'ands' */
.commaList li:only-of-type:before, .commaList li:only-of-type:after {
content: '';
padding: 0;
}