CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

CSS - Counters / List Counters

Lists can be classified as ordered lists and unordered lists.

In ordered lists,CSS can be used to mark the list items with alphabet and numbers.

CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules

list counter

CSS - Numbering With Counters

CSS counters variable values can be incremented by CSS rules.

CSS counters use the following propertiesāˆ’

  • counter-reset - Creates or resets a counter
  • counter-increment - Increments a counter value
  • content - Inserts generated content
  • counter() or counters() function - Adds the value of a counter to an element
  • CSS counter first created with counter-reset.

    CSS Counter Properties

    Property Description
    content Used with the ::before and ::after pseudo-elements, to insert generated content
    counter-increment Used to increments one or more counter values
    counter-reset Used to creates or resets one or more counters

    Example : Counters / List Counters

    <!DOCTYPE html>
    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) " ";

    <h3>Java script</h3>

    <h3>Server side</h3>

    When the above code is compiled , it produces the following result.


    css list country