Ordered lists aren’t the only elements that can be automatically numbered. Thanks to the various counter-related properties, any element can be. <\/p>\n
<body>\r\n <section><\/section>\r\n <section><\/section>\r\n <section><\/section>\r\n <section><\/section>\r\n<\/body><\/code><\/pre>\nbody {\r\n counter-reset: my-awesome-counter;\r\n}\r\nsection {\r\n counter-increment: my-awesome-counter;\r\n}\r\nsection:before {\r\n content: counter(my-awesome-counter);\r\n}<\/code><\/pre>\nEach <section><\/code> will respectively start with “1”, “2”, “3”, or “4”. <\/p>\nYou can control the style of the counter by comma separating the counter function. e.g. to make them use Roman numerals:<\/p>\n
section:before {\r\n content: counter(my-awesome-counter, upper-roman);\r\n}<\/code><\/pre>\nDemo<\/h3>\n
On CodePen:<\/a><\/p>\n<\/code><\/pre>\nMore Information<\/h3>\n\n- CSS3 spec<\/a><\/li>\n
- MDN docs<\/a><\/li>\n<\/ul>\n
Browser Support<\/h3>\n
\n\n\nChrome<\/span><\/th>\n Safari<\/span><\/th>\n Firefox<\/span><\/th>\n Opera<\/span><\/th>\n IE<\/span><\/th>\n Android<\/span><\/th>\n iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n\n\n2+<\/td>\n 3.1+<\/td>\n Any<\/td>\n 9.2+<\/td>\n 8+<\/td>\n TBD<\/td>\n TBD<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"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 […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13915,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1583,1378,969],"acf":[],"jetpack-related-posts":[{"id":14035,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/counter-reset\/","url_meta":{"origin":14033,"position":0},"title":"counter-reset","date":"September 5, 2011","format":false,"excerpt":"The counter-reset property allows for automatic numbering of elements. Like an ordered list (
) element. article { counter-reset: section; } section { counter-increment: section; } section h2:before { content: counter(section) '. '; } The counter-reset property is used to reset a CSS counter to a given value. It is part\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":321345,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/counter-set\/","url_meta":{"origin":14033,"position":1},"title":"counter-set","date":"September 17, 2020","format":false,"excerpt":"The counter-set CSS property, true to its name, sets the starting value for a CSS counter. You know how ordered lists start at 1 and then increment up from there? The counter-set property allows us to set that starting value to something else, say, -1. Or 2. Or 200! Except\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/counter-set-chapters-h2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3932,"url":"https:\/\/css-tricks.com\/snippets\/php\/check-if-file-exists-append-number-to-name\/","url_meta":{"origin":14033,"position":2},"title":"Check if File Exists \/ Append Number to Name","date":"September 8, 2009","format":false,"excerpt":"If the file name exists, returns new file name with _number appended so you don't overwrite it. function file_newname($path, $filename){ if ($pos = strrpos($filename, '.')) { $name = substr($filename, 0, $pos); $ext = substr($filename, $pos); } else { $name = $filename; } $newpath = $path.'\/'.$filename; $newname = $filename; $counter =\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14158,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/after-and-before\/","url_meta":{"origin":14033,"position":3},"title":"::before \/ ::after","date":"September 6, 2011","format":false,"excerpt":"The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this: div::before {\u2026","rel":"","context":"In \"psuedo elements\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14031,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/content\/","url_meta":{"origin":14033,"position":4},"title":"content","date":"September 5, 2011","format":false,"excerpt":"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: Chris<\/div> Would render like this: Name: Chris\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4477,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/comments-in-javascript\/","url_meta":{"origin":14033,"position":5},"title":"Comments in JavaScript","date":"October 22, 2009","format":false,"excerpt":"function doSomething() { \/* This code by Chris Coyier *\/ var i = 0; \/\/ counter to be used later; } Comments in JavaScript can be between \/* *\/ markings (useful for multiple line comments) or after \/\/ markings (for single lines only).","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14033"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14033"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14033\/revisions"}],"predecessor-version":[{"id":282069,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14033\/revisions\/282069"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13915"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14033"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}