• 
• 1. SitePoint
  2. Reference
  3. CSS
  4. Generated Content
  5. counter-increment
  6. CSS Live Demo: counter-increment (this page)
• See also: All Live Demos

CSS Live Demo: counter-increment

Type your CSS here: (any properties allowed except expression, behavior and @import) h1 { counter-reset:section; } h2:before { counter-increment:section; content:"Chapter " counter(section) ": "; } h1, h2 { font:normal normal normal 1.5em sans-serif; } h2 { font-size:1.1em; }

Type your HTML here: (any tags allowed except script, iframe, frame, object, img and embed) <h1>The Art &amp; Science of JavaScript</h1> <h2>Fun with Tables</h2> <h2>Creating Client-side Badges</h2> <h2>Creating Vector Graphics with canvas</h2> <h2>Debugging and Profiling with Firebug</h2> <h2>Metaprogramming with Javascript</h2> <h2>Building a 3D Maze with CSS and JavaScript</h2> <h2>Flickr and Google Maps Mashups</h2>

Show me!

Your results appear here: