preface

You must have encountered typesetting such as implementing step bars, numbering articles, etc. If you write a fixed number, add or delete steps or chapters, the subsequent numbers need to be manually changed. That would be a hassle.

The CSS provides the counter function to dynamically set the number.

CSS counter

To implement CSS counters, first understand the properties and methods of CSS counters

counter-reset
counter-increment
counter()
Copy the code

counter-reset

Counter -reset defines and initializes one or more CSS counters. Sets the name and initial value of the counter. Use grammar:

Counter-reset :[< identifier >< integer >?] +|none|inheritCopy the code

Each counter name can be followed by an optional < integer > value that specifies the initial value of the counter. The initial value of the counter is not the first digit when the counter is displayed. If you want the counter to be displayed from 1, you need to set the initial value in coutter-reset to 0.

someSelector{ counter-reset:counterA; /* counter-reset:counterA 6; /* counter-reset:counterA 4 counter B; Counter -reset:counterA 4 counterB 2; /* Counter -reset:counterA 4 counterB 2; /* Counter counterA initialized with an initial value of 4, counter counterB initialized with an initial value of 2*/}Copy the code

counter-increment

The counter-increment property is used to specify the increment value of one or more CSS counters. It takes one or more identifiers as values, specifying the name of the counter to increment.

Use grammar:

Counter -increment:[< identifier >< integer >?] +|none|inheritCopy the code

Each counter name (identifier) can be followed by an optional < integer > value that specifies how much the counter needs to be incremented for each occurrence of our numbered element. The default increment is 1. Zero and negative integers are allowed. If a negative integer is specified, the counter is decremented.

The counter-increment attribute must be used with the counter-reset attribute

Article {/* Defines and initializes counters */ counter-reset:section; /* article h2{/* counter increment:section; /* article h2{/* counter increment:section; /* Equivalent to counter increments: section 1; * /}Copy the code

couter()

The counter() function must be used with the Content property to display CSS counters. It takes the CSS counter name as an argument and passes it as a value to the Content property, which displays the counter as the generated content using the :before pseudo-element.

h2:before{content:counter(section); 
}
Copy the code

The counter() function has two forms: counter(name) and counter(name,style). The name argument is the name of the counter to display; The counter name can be specified using the counter-reset attribute.

couters()

The counters() function must also be used with the content property to display CSS counters. Like the counter() function, the counters() function is passed as a value to the content property; The Content property then uses the :before pseudo-element to display the counter as the generated content.

The counters() function also has two forms: counters(name,string) and counters(name,string,style). The name parameter is also the name of the counter to display. You can use the counter-reset attribute to specify the name of the counter.

The counters() function differs from the counter(singular form) in that it can be used to set nested counters.

Nested counters are used to provide automatic numbering for nested elements, such as nested lists. If you want to apply counters to nested lists, you can number the first-level items, for example, 1,2,3, and so on. The second level list items will be numbered 1.1, 1.2, 1.3, and so on. Level 3 projects will be 1.1.1, 1.1.2, 1.1.3, 1.2.1, 1.2.2, 1.2.3, etc.

The string argument is used as a separator between numbers at different levels of nesting. For example, in ‘1.1.2’, the dot (‘.’) is used to separate different level numbers. If we specify the points as delimiters using the counters() function, it might look something like this:

content:counters(counterName,".")
Copy the code

If you want nested counters to be separated by another character, for example, if you want them to appear as “1-1-2”, you can use a dash instead of a dot as a string value:

content:counters(counterName,"-")
Copy the code

conclusion

Using CSS Counters to create auto-increasing Counters for elements does not just rely on a single CSS attribute; it requires several attributes to work together. The attributes used include: using CSS Counters to create auto-increasing Counters for elements does not just rely on a single CSS attribute; it requires several attributes to work together. The attributes used include:

  • Counter-reset: Defines the name and initial value of the counter.
  • Counter -increment: Identifies the range in which a counter is associated with the actual value.
  • Content: Used to generate content, which is:before,:afteror::before,::afterA property of. In generating counter content, the main matchcounter()Use together.
  • Counter () : This function sets the value of the insert counter.
  • Before, aftercontentUsed to generate counter content.

Source: codepen. IO/denghuijie /…