Use CSS counters

Before using counters, you must use the counter-reset Property to initialize the value of the counter. The counter can be accessed through counter-increment Property specifies that its value is increasing or decreasing. The value of the current counter can be counter() or counters() Function, which is usually displayed in the Pseudo element Of content Property.

Note that counters can only be used in elements that can generate boxes (set or reset values, increment). For example, if an element is set to display: none , any counter operation on this element will be ignored.

Before using counters, you need to use the counter-reset Property to initialize its value. This property can also be used to specify the initial value of the counter.

Next, we will name it section The counter for is initialized to the default value (0).

 counter-reset : section ;

You can also initialize multiple counters at the same time and specify their initial values. Next, we will name it section and topic Initializes the counter of to the default value and sets the page The initial value of the counter is specified as 3.

 counter-reset : section page 3 topic ;

After initialization, the counter value can be used counter-increment To specify that it is increasing or decreasing. For example, the following declares a h3 Label Incremental section Counter.

 h3::before  {
   counter-increment : section ;  /* Increment the value of section counter by 1 */
 }

You can specify a single increment or decrement value (positive or negative) after the name of the counter.

Counter name cannot be none 、 inherit or initial Otherwise, the corresponding declaration will be ignored.

The value of the counter can be used counter() or counters() The function can be used in the content Properties.

For example, the following uses counter() The declared counter will h3 Add text before title Section <number>: , of which <number> Is the value of the decimal count (default display style):

 h3::before  {
   counter-increment : section ;  /* Increment the value of section counter by 1 */
   content :  "Section "  counter ( section )  ": " ;  /* Display counter value in default style (decimal) */
 }

When you do not need to include the number of the parent context, but only the number of nested content, you should use the counter() Function. For example, the count of each nested content in the following example starts from 1:

 1 One 1 Nested one 2 Nested two 2 Two 1 Nested one 2 Nested two 3 Nested three 3 Three

When it is necessary to include both the parent context and the number of nested content, use counters() Function. For example, each nested content of the following example contains a parent number:

 1 One 1.1 Nested one 1.2 Nested two 2 Two 2.1 Nested one 2.2 Nested two 2.3 Nested three 3 Three

counter() Functions have two forms: counter(<counter-name>) and counter(<counter-name>, <counter-style>) 。 The generated text is the value of the innermost counter with the specified name within the scope of the pseudo element.

counters() Functions also have two forms: counters(<counter-name>, <separator>) and counters(<counter-name>, <separator>, <counter-style>) 。 The generated text consists of the values of all counters of the specified name within the scope of the pseudo element. These values go from the outermost layer to the innermost layer, using the specified string（ <separator> ）Separation.

Both of the above functions can use the specified <counter-style> To render its values (default is decimal ）。 You can also use list-style-type Property, or custom style 。

Basic example and Example of counter nesting These two examples show counter() and counters() How to use.

The reverse counter is a counter that is used to decrement (not increment). The reverse counter can be accessed by counter-reset Use the counter name in the reversed() Function wrap.

The default initial value of the reverse counter is the same as the number of elements (different from the conventional counter with a default initial value of 0). This makes it easier to implement a counter that counts backwards from the initial value of the number of elements to 1.

For example, to create a section Reverse counter (use the default initial value), you only need to write:

 counter-reset :  reversed ( section ) ;

You can also specify its initial value.

The value of the counter will follow the counter-increment Property.

use <ol> The ordered list created by the element will be automatically applied with the name list-item Counter for.

Like other counters, it is also a default self increasing (+1) counter with an initial value of 0. For the reverse counter, the initial value is the number of elements, and the default self decreasing (- 1) counter. Unlike custom counters, list-item Is based on whether it is a reverse counter automatic Self increasing or self decreasing.

Can be modified through CSS list-item The default behavior of counters applied to sequenced tables. For example, you can change the default initial value, or use counter-increment Change the way of increasing or decreasing.

The following example will add a "Section [the value of the counter]:" string before each title.

CSS

 body  {
   counter-reset : section ;  /* Set a counter named 'section', and its initial value is 0. */
 }

 h3::before  {
   counter-increment : section ;  /* Increment the value of section counter by 1 */
   content :  "Section "  counter ( section )  ": " ;  /* Display the word 'Section ', the value of section counter, and a colon before the content of each h3 */
 }

HTML

 < h3 > Introduction </ h3 >
 < h3 > Body </ h3 >
 < h3 > Conclusion </ h3 >

result

The following example is similar to the previous one, except that it uses a reverse counter. If your browser supports reversed() Function, the result will be similar to this:

CSS

 body  {
   counter-reset :  reversed ( section ) ;  /* Set a counter named 'section', and its initial value is 0. */
 }

 h3::before  {
   counter-increment : section -1 ;  /* Decrement the value of section counter by 1 */
   content :  "Section "  counter ( section )  ": " ;  /* Display the word 'Section ', the value of section counter, and a colon before the content of each h3 */
 }

HTML

 < h3 > Introduction </ h3 >
 < h3 > Body </ h3 >
 < h3 > Conclusion </ h3 >

result

Sometimes we don't need the counter to display its value every time it is incremented. The following example only replaces the link content with the value generated by the counter when it is empty.

 :root  {
   counter-reset : link ;
 }

 a[href]  {
   counter-increment : link ;
 }

 a[href]:empty::after  {
   content :  "["  counter ( link )  "]" ;
 }

HTML

 < p > See < a  href = " https://www.mozilla.org/ " > </ a > </ p >
 < p > Do not forget to < a  href = " contact-me.html " > leave a message </ a > ! </ p >
 < p > See also < a  href = " https://developer.mozilla.org/ " > </ a > </ p >

result

CSS counters are particularly useful for creating directories (multi-level sequential tables) because they automatically create an instance of CSS counters in child elements. use counters() Function to insert a separator string between nested counters at different levels.

CSS

 ol  {
   counter-reset : section ;  /* Creates a new instance of the section counter with each ol element */
   list-style-type : none ;
 }

 li::before  {
   counter-increment : section ;  /* Increments only this instance of the section counter */
   content :  counters ( section ,  "." )  " " ;  /* Combines the values of all instances of the section counter, separated by a period */
 }

HTML

 < ol >
   < li > item </ li >           <!--  1     -->
   < li > item <!--  2     -->
     < ol >
       < li > item </ li >       <!--  2.1   -->
       < li > item </ li >       <!--  2.2   -->
       < li > item <!--  2.3   -->
         < ol >
           < li > item </ li >   <!--  2.3.1 -->
           < li > item </ li >   <!--  2.3.2 -->
         </ ol >
         < ol >
           < li > item </ li >   <!--  2.3.1 -->
           < li > item </ li >   <!--  2.3.2 -->
           < li > item </ li >   <!--  2.3.3 -->
         </ ol >
       </ li >
       < li > item </ li >       <!--  2.4   -->
     </ ol >
   </ li >
   < li > item </ li >           <!--  3     -->
   < li > item </ li >           <!--  4     -->
 </ ol >
 < ol >
   < li > item </ li >           <!--  1     -->
   < li > item </ li >           <!--  2     -->
 </ ol >

result

• counter-reset
• counter-set
• counter-increment
• @counter-style