Counter - The CSS counter is used to number objects to denote the information hierarchy on the website, helping to display information in a clear and understandable way for readers. This is a pretty useful feature, but not yet known by CSS.

Counter is like variable in programming. The value of the variable increases according to the rules of CSS. The counter allows you to adjust the content interface based on its location in the document.

Automatically number with the counter

CSS counter is like "variable". Variable values ​​can be increased by CSS rules (which will track the number of times they are used).

To work with CSS counters, we will use the following properties:

1. counter-reset : Create Counter or Reset counter.
2. counter-increment: Increase counter value.
3. content - Insert content into the counter.
4. Counter () or counters () function - Add the counter value to the component.

To use the Counter, first create a counter-reset.

Example: Create a website with a counter, increase the value of the counter for the card

 

and insert the "Section:" content

 body { 
  counter-reset: section; 
 } 
 
 h2::before { 
  counter-increment: section; 
  content: "Section " counter(section) ": "; 
 } 

Full code:

Use example Counter - CSS counter:

Website TipsMake.com

Technology Village

Technology

Science

Nested counters

The following example creates a counter for the page (main - section) and a counter for each element

 

(subsection - subsection). Section counter will be counted for each element

 

with the " Section " content, and the subsection counter will be counted for each element

 

with "." :

 body { 
  counter-reset: section; 
 } 
 
 h2 { 
  counter-reset: subsection; 
 } 
 
 h2::before { 
  counter-increment: section; 
  content: "Section " counter(section) ". "; 
 } 
 
 h3::before { 
  counter-increment: subsection; 
  content: counter(section) "." counter(subsection) " "; 
 } 

Full code:

Website TipsMake.com

Category Technology Village

Technology story

Attack the network

Technology category

Program

System

Science Category

Mystery - Strange story

Explore nature

In addition, you can use the counter in CSS to create lists, which are also useful and appropriate, which can automatically number the list as you wish.

For example, you create a list with a counter as follows, use the extra function counters () to decentralize nested counters:

 ol { 
  counter-reset: section; 
  list-style-type: none; 
 } 
 
 li::before { 
  counter-increment: section; 
  content: counters(section,".") " "; 
 } 

Full code:

1. Technology Village

1. Technology

1. System

1. Application

1. Program

1. CSS and CSS3

1. Python

1. SQL Server

1. Game - Games

1. Science

1. Life

1. About TipsMake.com

1. Contact TipsMake.com

Previous article: Form - Form in CSS

Next lesson: Design Layout - Website layout in CSS