CSS sets a counter for the number of times a selector appears and outputs

1. Counter-reset Properties
Usage: The Counter-reset property sets the value of the counter for the number of times a selector appears. The default is 0.

Note: With this property, the counter can be set or reset to any value, either positive or negative. If number is not provided, the default is 0.

Note: If you use "Display:none", you cannot reset the counter. If you use "Visibility:hidden", you can reset the counter.

2. Counter-increment Properties
Usage: The Counter-increment property sets the counter increment for each occurrence of a picker. The default increment is 1.

Note: With this property, the counter can increment (or decrement) a value, which can be positive or negative. If the number value is not provided, the default is 1.

Note: If you use "Display:none", you cannot increase the count. If you use "Visibility:hidden", you can increase the count.

3. Content Properties

The content property is used in conjunction with: Before and: After pseudo-elements to insert a build.

Content Property Value:

counter Td>

none	set con Tent, if specified as nothing
normal	set content, if specified, normal, default is "None" (that is nothing)
set counter contents
attr (attribute)	set content as one of the properties of the selector.
string	set content to text you specify
open-quote	Settings conte NT is an open quote
close-quote	set content is closed quotation marks
no-open-quote	If you mean
no-close-quote	If specified, remove closing quotes for content
url ( url )	set some kind of media (image, sound, video, etc.)
inherit	The value of the specified content property, which should inherit from the parent element

#progressbar {counter-reset:step;} #progressbar Li:before {content:counter (step); counter-increment:step;} #progressbar li:after {content: ';} #progressbar li:first-child:after {content:none;}

　　

CSS sets a counter for the number of times a selector appears and outputs