CSS, since its version 2.1, offers a relatively unknown counter system due to an old incompatibility on IE. Some of you will probably defend the following position: CSS is not made for that, you have to use JavaScript. So be it! But know that it exists, and discover how to use it. Small introduction! <\/p>\n
This blog post is a translation from the original french article written in 2012<\/strong>. Keep this history in mind \ud83d\ude42<\/p>\n As I told you, the counters exist and are defined since CSS2.1 by the W3C<\/a>. The arrival of CSS3 allowed to complete the definition a bit and to include it in a module called “Generated and Replaced Content<\/a>“.<\/p>\n In this article, we will play with three properties and one function:<\/p>\n Here we’ve got two initialized counters: Here we have two counters redefined: Here our two initial counters will be increased by 2 for count1 and 4 for count2.<\/li>\n In this example, the content of a About the style of the counter, it is possible to specify the values “disc”, “circle”, “square” and “none”, so it is possible to generate nothing. I haven’t found any real use case for these values yet.<\/p>\n As I write these lines, the The simplest way to present those CSS Counters is to give you a well-organized document with a few headings at different levels. The code used in HTML is relatively simple: make sure you have The CSS is relatively short when it comes to counters, you just have to pay attention to the details: when counters are initiated and incremented.<\/p>\n You’re going to tell me: What’s the point since the \n<\/p>\n\n There is a lot of stuff to know about lists, especially Don’t hesitate if you have any question.<\/p>\n CSS, since its version 2.1, offers a relatively unknown counter system due to an old incompatibility on IE. Some of you will probably defend the following position: CSS is not made for that, you have to use JavaScript. So be it! But know that it exists, and discover how to use it. Small introduction!<\/p>\n","protected":false},"author":4,"featured_media":7102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[652,647],"tags":[864,807],"coauthors":[597],"class_list":["post-7096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css3","category-tutorials","tag-counter-en","tag-css-en"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/7096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/comments?post=7096"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/7096\/revisions"}],"predecessor-version":[{"id":7107,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/7096\/revisions\/7107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/media\/7102"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/media?parent=7096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/categories?post=7096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/tags?post=7096"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/coauthors?post=7096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
counter-reset<\/code>: this property allows you to initialize a counter (create it). To do this, you need to fill in one or more counter names followed by its initial numerical value.
\nExample:
\ncounter-reset: count1 4 count2 0;<\/code><\/pre> count1<\/code> which starts at 4, and count2<\/code> which starts at 0.<\/li>\ncounter-set<\/code> : this property allows you to redefine the value of a counter, without creating a new one. To do this, fill in one or more existing counter names followed by its new numerical value.
\nFor example:
\ncounter-set: count1 0 count2 3;<\/code><\/pre> count1<\/code> which restarts at 0, and count2<\/code> which restarts at 3.<\/li>\ncounter-increment<\/code> : this property allows you to increment a counter. To do this, enter the name of one or more counters, each followed by the number to be incremented. Without number following the counter name, the increment will be +1 by default.
\nFor example:
\ncounter-increment: count1 2 count2 4;<\/code><\/pre> counter()<\/code>: this function associated with the pseudo-element ::before<\/code> or ::after<\/code> and the content<\/code> property allows you to insert the counter in your page. This generates a dynamic content. It takes one parameter and a second optional parameter. The first one is the counter name, the second one is the counter style<\/a>. (same values as list-style-type<\/code>)
\nFor example:li::before {li<\/code> element will be preceded by a content type of “04 -“.<\/li>\n<\/ul>\ncounter-set<\/code> property is not recognized by any browsers but Firefox.<\/p>\nCounter CSS D\u00e9mo<\/h2>\n
\nHere is the demonstration:
\nCSS Counters Demo<\/a><\/p>\nh2<\/code>, h3<\/code> and h4<\/code> in a block of text, for example. I give you a snippet if you want to test :<\/p>\n<h2>This is the new way of life<\/h2>\/* we initiate counters namedCSS Counters demo on an odered list<\/h3>\n
ol<\/code> list is already numbered?
\nYes, that’s true, but the use of the generated content allows to apply richer styles thanks to CSS.
\nAn example in image (and code):<\/p>\nol<\/code> elements. Discover more about attribute start, reversed and type of counters<\/a>.<\/p>\nUseful links and sources<\/h2>\n
\n