Posted By

hotdiggity on 05/24/10


Tagged

css list comma separated


Versions (?)

CSS Comma Separated List


 / Published in: CSS
 

Separates an html list of words with a comma using CSS.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Comma separated list</title>
  5. <style>
  6. #tags ul li{
  7. display:block;
  8. float:left;
  9. _display:inline;
  10. _float:none;
  11. }
  12. #tags ul li::after{
  13. content:", ";
  14. white-space:pre;
  15. }
  16. #tags ul li:first-child::before{
  17. content:"";
  18. }
  19. #tags ul li:last-child::before{
  20. content:"& ";
  21. white-space:pre;
  22. }
  23. #tags ul li:last-child::after{
  24. content:"";
  25. }
  26. #tags ul + *{
  27. clear:left;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div id="tags">
  33. <ul>
  34. <li>t-shirt (1)</li>
  35. <li>design (1)</li>
  36. <li>etiquette (1)</li>
  37. </ul>
  38. </div>
  39. </body>
  40. </html>

Report this snippet  

You need to login to post a comment.