Pseudo elements in CSS are actually very easy to use, but they are often overlooked by everyone. Many people may now only think that the value of the content attribute that is commonly used in pseudo elements only supports strings. In addition to strings, there are other commonly used content attributes. There are also uri and counter. What I want to introduce today is conter (counter).
Counters in CSS are similar to variables. They can implement simple counting functions and display the results on the page. They are widely used on early websites. To implement a counter, you need to use the following attributes:
Let's take a look at how counters are used in CSS.
1. Use counters for automatic numbering
CSS counters increment variables according to rules.
CSS counters use the following properties:
(1) counter-reset:name1 name2 creates or resets a counter (multiple counters can be defined at the same time, separated by spaces)
(2) counter-increment:name step increment variable (can increment one or more)
(3) content:counter(name) inserts the generated content (using pseudo elements before/after)
(4) The counter() or counters() function adds the counter value to the element
When creating a counter, it must be created in the previous tag or the parent tag of the tag. If it is defined in its own tag, it will be invalid.
Specific applications:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Dotcpp Programming</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: before{/*Set the step size first*/counter-increment:counter11;content:'th'counter(count er1)'section';}p::before{/*Set the step size first*/counter-increment:counter21;content:'The 'counter(counter1)' section';}</style></he ad><body><div><h2></h2><p></p><p></p><p></p><h2></h2><p></p> <p></p><p></p><p></p></div></body></html>Running results:
2. Initialize counter
To use a counter, you first need to use the counter-reset attribute to create a counter. This process is called initializing the counter. The syntax format of the counter-reset attribute is as follows:
counter-reset: none|[<identifier><integer>]
Parameter description is as follows:
(1) none: Prevent counter reset;
(2) <identifier>: Define the name of the counter;
(3) <integer>: Define the starting value of the counter. The default value is 0 and can be a negative value.
3. Counter increases automatically
After initializing the counter, you can use the counter-increment attribute to specify when the counter will increment. The syntax is as follows:
counter-increment: none|[<identifier><integer>]
Parameter description is as follows:
(1) none: prevent the counter from increasing;
(2) <identifier>: Define the name of the counter to be incremented;
(3) <integer>: Define the value that the counter increases each time. The default value is 1 and can be a negative value.
4. Display counter
Finally, there is how to display the counter. To display a counter you can use the counter() or counters() function. The syntax of these two functions is as follows:
counter(name)counters(name,string,list-style-type)
Parameter description is as follows:
(1) name: the name of the counter;
(2) string: string used for splicing when counters are used nested;
(3) list-style-type: The style displayed by the counter can be any value of the "list-style-type attribute" allowed in CSS.
The following uses a simple example to demonstrate the use of counters:
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increment:chapter;}h6{counter- increment:section;}h5:before{content:Chaptercounter(chapter).; }h6:before{content:counter(chapter).counter(section);}</style></head><body><h5>Chapter 1</h5><h6>Section 1</h6>< h6>No. Section 2</h6><h6>Section 3</h6><h6>Section 4</h6><h5>Chapter 2</h5><h6>Section 1</h6><h6>Chapter Section 2</h6><h6>Section 3</h6><h6>Section 4</h6></body></html>Running results:
5. Counter nesting
In addition, counters can also be nested, and the counters() function can be used to insert a string between nested counters at different levels, as shown in the following example:
<!DOCTYPEhtml><html><head><style>ol{/*Create a new counter instance for each ol element*/counter-reset:ol-list;list-style-type:none;}li:before{ /*Increase only the current instance of the counter*/counter-increment:ol-list;/*Increase the values separated by "." for all counter instances*/content:counters(ol-list,.),;}< /style></head><body><ol><li>Volume</li><li>Chapter<ol><li>Section</li><li>Section</li><li>Section<ol ><li>Section</li><li>Section</li></ol></l i><li>Section<ol><li>Subsection</li><li>Subsection</li><li>Subsection</li></ol></li></ol></li>< li>Chapter</li><li>Chapter</li></ol></body></html>Running results:
