Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS counters

    • 0
    • 2
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 574
    Comment on it

    CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document. CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. MDN

    Example :-

    CSS:-

    body {
      counter-reset: section;
    }
    p:before {
      counter-increment: area; 
      content: "Area" counter(area) " - ";
    }
    

    HTML :-

    <p> counters </p>
    <p> counters </p>
    <p> counters </p>
    

    Output:-

    counters

    counters

    counters

    Nested counters

    A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the counters() function, a string can be inserted between different levels of nested counters. MDN

    Example:-

    CSS:-

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

    HTML :-

    <ul>
      <li>item</li>         
      <li>item              
        <ul>
          <li>item</li>     
          <li>item</li>     
          <li>item          
            <ul>
              <li>item</li> 
              <li>item</li> 
            </ul>
            <ul>
              <li>item</li> 
              <li>item</li> 
              <li>item</li> 
            </ul>
          </li>
          <li>item</li>     
        </ul>
      </li>
      <li>item</li>         
    </ul>
    

    Output:-

    • item
    • item
      • item
      • item
      • item
        • item
        • item
        • item
        • item
        • item
      • item
    • item

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: