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

Summary of CSS counter and content

CSS uses Alibaba vector library to quickly add good-looking icon effects to the corresponding positions (example code)

Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5

Solution to the problem that the background image of a label does not display in IE8

Solution to the problem of var in for loop

CSS makes the footer automatically stick to the bottom when the content height is not enough

Responsive Web Design Learning (2) — Can videos be made responsive?

Javascript basics about built-in objects

Details about the like operator in MySQL

Solve the problems encountered when installing MySQL 8.0 on Win10 system

WeChat applet scroll-view implements a solution to duplicate data loading when pulling up

Recommend

Tips and precautions for using MySQL index

In-depth understanding of Vue transition and animation

How to configure MySQL master-slave replication under Windows

JS implementation of carousel example

A brief discussion on how to modify/set the environment variable JAVA_HOME under Linux

Basic usage and pitfalls of JavaScript array sort() method

A brief discussion on HTML doctype and encoding

Usage instructions for the docker create command

MySQL 8.0.21 installation tutorial with pictures and text

Use viewport in meta tag to define screen css

How to use native JS to implement touch sliding monitoring events

Prototype and prototype chain prototype and proto details

How to restore a single database or table in MySQL and possible pitfalls

MySQL 5.7.16 ZIP package installation and configuration tutorial

Detailed explanation of how to configure the tomcat external server in HBuilderX to view and edit the jsp interface