以逗号分隔的句子显示OL/UL列表

Posted 2021-02-25

Displays html list as a gramatically correct English sentence. For example <ul class="commaList"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> Would be displayed as: One, two, three and four.

/* display ordered list as comma list */
ul.commaList li:after{
	content: ',';
	padding-right: 5px;
}
 
ul.commaList li:first-child {
	text-transform: capitalize;
}
 
ul.commaList li:nth-last-child(2):after {
	content: '';
	padding-right: 5px;
}
 
ul.commaList li:last-child:after {
	content: '.';
	clear: both;
}
 
ul.commaList li:last-child:before {
	content: 'and ';
	padding-right: 0;
}
 
ul.commaList li:only-of-type:before {
	content: '';
	padding: 0;
}