Advanced Search

CSS Comma Separated List

/ Published in: CSS
Save to your folder(s)
Separates an html list of words with a comma using CSS.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.