CSS counters (custom list)

Concept

The CSS3 counter (CSS Counters) allows us to use CSS to count any element in the page, implementing a function similar to the ordered list (custom ordered list)

Compared to an ordered list, it is characterized by the ability to count arbitrary elements while achieving a personalized count

Using counter steps

1. Defining counters
2. Set the increment rule for a counter
3. Custom list Styles
4. Call counter

Counter Properties

• Counter-reset: Define counters, including initial values, scopes, etc.
• Counter-increment: Sets the increment rule for the counter (usually by default, that is, the value only sets the counter name, no increment rule is set)
• Counter ()/counters (): Used in the Content property to invoke the counter
• @counter-style: Custom list Styles

Counter-reset syntax

Counter-reset:[<identifier><integer>?] +|none|inherit

Used to define the name, initial value, and scope of the counter, the default value is None

<identifier>: Counter Name

<integer>: Initial value of counter, can not write, default is 0

Note: This property fails when the element display is None

Counter-increment syntax

Counter-increment:[<user-ident><integer>?] +|none

Used to set the increment rule for the counter, the default value is None (Block counter increase)

<user-ident>: Counter name that requires an increment

<integer>: Counter increment value, can be negative, default is 1

We can set multiple counter increment rules at the same time

Note: This property fails when the element display is None

Counter () syntax

content:[<counter>]+

<counter>=counter (name) | Call the counter name directly to get a

Counter (Name,list-style-type) | Call the counter name and specify the counter list style

Counters () syntax

content:[<counter>]+

<counter>=counters (name,string) | When nesting counters, set the interval string to get 1.1,1.2,1.3

Counters (name,string,list-style-type) nesting counter, set the interval string and specify the style

Note: Using counters, you need to combine: Before and: after use. Multiple counters can be used at the same time

@counter-style Syntax

@counter-style counterstylename{

System: Algorithm

Range: Use Range

Symbols/additive-symbols: Symbols

Prefix: Prefix

Suffix: suffix

Pad: Complement 0

Negative: Negative policy

Fallback: Default value after error

Speakas: Voice Policy

}

Counter Demo

CSS counters (custom list)