Automatic Numbering with Counter
CSS counters are like variables. Variable values can be incremented by CSS rules (which track the number of times they are used). To use CSS counters, we will use the following attributes:
counter-reset - Create or reset counters
counter-increment - Increase counter value
Content - Insert generated content
counter() or counters() functions - add counter values to elements
To use a CSS counter, you must first create it using counter-reset. The following example creates a counter for the page (in the body selector), increments the counter value for each < H2 > element, and adds "Options < counter value >:" to the beginning of each < H2 > element:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Courses( jc2182.com)</title> <style> body { counter-reset: section; } h2::before { counter-increment: section; content: "option " counter(section) ": "; } </style> </head> <body> <h1>Use CSS Counter:</h1> <h2>HTML Course</h2> <h2>CSS Course</h2> <h2>JavaScript Course</h2> <p><b>Be careful:</b> Only when specified!DOCTYPE When, IE8 Only these attributes are supported.</p> </body> </html>
Nested counter
The following example creates a counter for the page (section) and a counter for each < H1 > element (subsection). For each < H1 > element, the section counter will be counted as "Section < Value Partition Counter >". And the "subsection" counter will be counted into each < H2 > element and into "<the value of the partition counter >=<the value of the piecewise counter>":
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Courses( jc2182.com)</title> <style> body { counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "Value of partition counter " counter(section) ". "; } h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; } </style> </head> <body> <h1>HTML Course:</h1> <h2>HTML Course</h2> <h2>CSS Course</h2> <h1>Scripting Course:</h1> <h2>JavaScript</h2> <h2>VBScript</h2> <h1>XML Course:</h1> <h2>XML</h2> <h2>XSL</h2> <p><b>Be careful:</b>Only when specified!DOCTYPE When, IE8 Only these attributes are supported.</p> </body> </html>
| attribute | describe |
|---|---|
| content | Use with:: before and:: after pseudoelements to insert generated content |
| counter-increment | Increment one or more counter values |
| counter-reset | Create or reset one or more counters |