The counter-reset property allows for automatic numbering of elements. Like an ordered list (<ol>), but it works on any element. It is particularly useful in creating a table of contents or numbering headings for something like a thesis paper. The counters are applied via the content property. A simple example: article { counter-reset: section; }
Properties
Ordered lists aren’t the only elements that can be automatically numbered. Thanks to the various counter-related properties, any element can be. <body> <section></section> <section></section> <section></section> <section></section> </body> body { counter-reset: my-awesome-counter; } section { counter-increment: my-awesome-counter; } section:before { content: counter(my-awesome-counter); } Each <section> will respectively start with “1”, “2”, “3”, or “4”. You can
The content property in CSS is used in conjunction with the pseudo elements ::before and ::after. It is used to literally insert content. There are four value types it can have. String .name::before { content: “Name: “; } Then an element like this: <div class=”name”>Chris</div> Would render like this: Name: Chris It could also be
With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally. .intro { -webkit-columns: 300px 2; -moz-columns: 300px 2; columns: 300px 2; }