Advanced Search

Display OL/UL list as comma separated sentence

/ Published in: CSS
Save to your folder(s)
Displays HTML list as a gramatically correct English sentence. \r\n\r\nFor example\r\n\r\n<ul class=\"commaList\">\r\n <li>one</li>\r\n <li>two</li>\r\n <li>three</li>\r\n <li>four</li>\r\n</ul>\r\n\r\nWould be displayed as: One, two, three and four.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* display ordered list as comma list */
  2. ul.commaList li:after{
  3. 	content: ',';
  4. 	padding-right: 5px;
  5. }
  6.  
  7. ul.commaList li:first-child {
  8. 	text-transform: capitalize;
  9. }
  10.  
  11. ul.commaList li:nth-last-child(2):after {
  12. 	content: '';
  13. 	padding-right: 5px;
  14. }
  15.  
  16. ul.commaList li:last-child:after {
  17. 	content: '.';
  18. 	clear: both;
  19. }
  20.  
  21. ul.commaList li:last-child:before {
  22. 	content: 'and ';
  23. 	padding-right: 0;
  24. }
  25.  
  26. ul.commaList li:only-of-type:before {
  27. 	content: '';
  28. 	padding: 0;
  29. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.