DevelopPHP.com
Web Development Training System

Automatic Numbering Tutorial Element Counter

In this CSS lesson we will demonstrate automatic numbering of web page elements using the ::before selector, and a counter function. The counter-reset and counter-increment properties give us the logic needed to created numbered sections with subsections. <style> h1 { counter-reset: section; } h2 { counter-reset: subsection; } h2::before { content: counter(section) ". "; counter-increment: section; } p::before { content: counter(section) "." counter(subsection) " "; counter-increment: subsection; } </style> <h1>HTML</h1> <h2>HTML Multimedia Elements</h2> <p>audio</p> <p>embed</p> <p>video</p> <h2>HTML Form Elements</h2> <p>form</p> <p>input</p> <p>textarea</p> <p>button</p>
AutomaticNumberingElementCounter