Posted By

onefastsnail on 05/24/12


Tagged


Versions (?)

counter css


 / Published in: Other
 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.  
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <meta name="robots" content="all, index, follow" />
  8. <meta name="description" content="" />
  9. <meta name="keywords" content="" />
  10. <meta name="author" content="" />
  11. <meta name="copyright" content="" />
  12. <title></title>
  13. <link rel="stylesheet" href="css/main.css" media="screen" />
  14. <link rel="shortcut icon" href="#" />
  15.  
  16. <style type="text/css">
  17.  
  18. /* identifies what section in your markup will contain the set of elements that will have the auto-incrementing integers */
  19. #wrapper {
  20. counter-reset: headings 0;
  21. }
  22.  
  23. h2:after {
  24. counter-increment: headings 1;
  25. content: "Chapter " counter(headings, decimal) ": ";
  26. }
  27. </style>
  28.  
  29. </head>
  30.  
  31. <body>
  32.  
  33. <div id="wrapper">
  34.  
  35.  
  36.  
  37. <h2>Heading</h2>
  38. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  39.  
  40. <h2>Heading</h2>
  41. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  42.  
  43. <h2>Heading</h2>
  44. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  45.  
  46. <h2>Heading</h2>
  47. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  48.  
  49.  
  50. </div>
  51.  
  52. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  53.  
  54. </body>
  55.  
  56. </html>

Report this snippet  

You need to login to post a comment.