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