CSS Counters

Counters Property, Nested Counters, CSS Counters, Work with CSS counters, Browser support, Outlisted list:

CSS counters are similar to the variables that are used to modify the look of the content according to where it is located on the page.

These CSS counters are maintained by CSS whose values can be incremented by CSS rules.

Numbering CSS Counters Properties

  • counter-reset: The counter-reset is used to reset a counter.
  • counter-increment: The counter-increment is used to incement the counter value.
  • content: Thecontent is used to insert generated content.
  • counter() OR counters() function: It is used to add the value of a counter to an element.

CSS Counter Properties Example

body {
     counter-reset: section;
h4:before {
     counter-increment: section;
     content: "section" counter(section) ":";


HTML Interview Questions

CSS Interview Questions

JavaScript Interview Questions

NOTE: IE8 supports these properties only if a !DOCTYPE is specified.

Nesting Counters

The CSS nesting counter means that counters within the counter (means that headings and subheadings); for example, for more understanding you can see the example which one mentioned below:

Example of Nesting Counter

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


Web Designing Interview Questions



JavaScript IQ

Programming Interview Questions

Java IQ

C/C++ IQ


Nesting Counter Example Explanation

In an upper example, we used <h3> as heading and <h4> as a subheading of <h3>.

CSS Counter Properties

  • content: The content property is used with the ::before and ::after pseudo-elements, to insert generated content.
  • counter-increment: The counter-increment property is used to increments one or more counters values.
  • counter-reset: The counter-reset property is used to create OR reset one OR more counters.

Browser Support

Browsers Chrome Edge Firefox Safari Opera
Support Yes Yes Yes Yes Yes

Email Us: advertise@gdatamart.com

Donate Us: Support to GDATAMART

© 2023 GDATAMART.COM (All Rights Reserved)