Summary of CSS counter and content

The content property was introduced as early as CSS 2.1, and you can use the :before and :after pseudo-elements to generate content. The content attribute is now supported by most browsers. You can find out more about the content attribute support on caniuse.com. Here is the current support status:

The content attribute is most commonly used with :before or :after to generate content. By default, the element claimed is an inline element:

The purpose of the above code is to add the content in content before and after the content of the div with the class name of test. Other styles can also be set after content. Here, content is equivalent to the activation mark of the pseudo-element and is indispensable.

div.test:before{
    content: "I am before div"; 
}
div.test:after{
     content: "I am behind the div";
}

In addition to using text values, the value of the content attribute can also use the attribute values of other tags through the attr() method:

a.test:after{
    content: attr(href);
}

<a class="test" href="http://www.taobao.com/">Welcome to</a>

CSS counters appeared relatively early, but I have only recently begun to understand them. Since CSS counters only work when used with the content attribute, and the content attribute is often used with the :before and :after pseudo-elements, there is an inseparable relationship between counters, pseudo-elements, and content. The css counter mainly consists of two properties and one method, namely:

1. Counter-reset

This property defines the name of the counter. Multiple counters can be defined at the same time. When defining a number, it represents the initial value. The default value is 0:

div.count{
    counter-reset: count1 count2;
}

The above code defines two counters count1 and count2, which are initially set to 0 by default.

2. Counter-increment

This property accepts two parameters. The first parameter represents the name of the counter, and the second represents the value of each increment. The default value is 1.

div.count:before{
    counter-increment: count1 2;
}

This line of code defines the single self-increment value of counter count1. At this time, the default initial value of the counter is 0+2=2; if the number 2 is omitted here, the default self-increment value is 1, and the initial value of the counter is 0+1=1.

3. counter()/counters()

This method is a counter call method, which receives two parameters. The first parameter is the counter name and the second is the value type. Let's do a small exercise on this case:

<!doctype html>
<html>
    <head>
         <meta charset="utf-8">
         <title>counter&content</title>
         <style>
                div.conter{
                    margin-left: 50px;
                    couter-reset: count; /* define counter count */
                }
               .conter p{
                     height: 40px;
                     border: 1px solid #ffe000;
                }
               .conter p:before{
                     content: counter(count,decimal) "." /*Call the counter and add the number.*/
                     counter-increment: count;
                }
         </style>
    </head>
    <body>
         <div class="conter">
               <p>Paragraph 1</p>
               <p>Paragraph 2</p>
               <p>Paragraph 3</p>
               <p>Paragraph 4</p>
               <p>Paragraph 5</p>
         </div>
    </body>
</html>

The final result is as follows:

This is the end of this article about css counter and content summary. For more relevant css counter content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of table return and index coverage examples in MySQL

>>: Detailed explanation of various types of image formats such as JPG, GIF and PNG

Vue realizes the sliding cross effect of the ball

Summary of CSS counter and content

Vue realizes the sliding cross effect of the ball

Automatically install the Linux system based on cobbler

Implementation of nacos1.3.0 built with docker

Nginx/Httpd load balancing tomcat configuration tutorial

iframe multi-layer nesting, unlimited nesting, highly adaptive solution

Analysis of the difference between the usage of left join setting conditions in on and where in mysql

Nginx configuration to achieve multiple server load balancing

How to introduce Excel table plug-in into Vue

Detailed explanation of Vue monitoring attribute graphic example

Summary of methods for finding and deleting duplicate data in MySQL tables

Recommend

Summary of the differences between get and post requests in Vue

Use pure CSS to achieve switch effect

Insufficient memory problem and solution when docker starts elasticsearch

Detailed explanation of Nest.js parameter validation and custom return data format

18 killer JavaScript one-liners

Graphic tutorial on installing tomcat8 on centos7.X Linux system

Detailed explanation of the implementation principle of Vue2.0/3.0 two-way data binding

Problems and experiences encountered in web development

Ubuntu 20.04 desktop installation and root permission activation and ssh installation details

Summary of basic knowledge points of Linux group

Implementation steps for building multi-page programs using Webpack

A brief discussion on the construction and operation mechanism of the real-time computing framework Flink cluster

WML tag summary

How to use Chrome Dev Tools to analyze page performance (front-end performance optimization)

Detailed explanation of the difference between MySQL null and not null and null and empty value ''''