So this isn't a new trick by any means, but it sure is handy (Think outlines, book chapters, line numbering...) The more markup you can minimize via CSS the better, in my book.
Counter-increment CSS Property "The counter-increment property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed." -W3.org
Fundamentally this property allows web developers to dynamically name html elements per element. I am using this to create line numbers for theme editor app
Background
The counter-reset property specifies when the counter should be reset. The identifier in this property is just a matter of preference. A lot of examples I have run across use section or chapter. To use this effectively you need to specify a parent element with the counter-reset property and the child element that should be incremented with the counter-increment property.
Example
CSS
body {
counter-reset: section;
}
div:before {
counter-increment: section;
content: counter(section);
}HTML
<body>
<div>Some content goes here</div>
<div>More content goes here</div>
<div>Yep, more content</div>
</body>Output
1 Some content goes here 2 More content goes here 3 Yep, more content
Check out my jsfiddle for a demo! Dynamic Numbered CSS
Join the conversation