CSS TutorialLesson 40Free preview

CSS Counters

This lesson is part of CSS · All levels

Summary

CSS counters are automatic counters provided by CSS without the help of JavaScript. We make the counter reset, add the value with the counter-increment, and then display it through the content property on the pseudo-element. This technique is suitable for automatic part numbers and numbered lists.

Key points

The counter-reset makes the calculator at once determine the initial value.
The counter-increment adds to the calculator value every time a suitable element is found.
The counter value is displayed via counter(nama) on the content property in::before or::after.
The counter-reset can be reset to a certain element so that the countdown starts over again.
Counters can also be used to count the number of specific elements in a container.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.