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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 392
    Comment on it

    CSS Counters:

    CSS counters are similar to variable in a programming language. Counter values are incremented by rules define in CSS. Variables are required to manipulate counter value are as follows:

    • counter-reset - This variable is used to create or reset a counter
    • counter-increment - This variable is used to increment a counter value
    • content - Used to insert generated content

    Example:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        counter-reset: count;
    }
    
    h3::before {
        counter-increment: count;
        content: "Counter Value " counter(count) ": ";
    }
    </style>
    </head>
    <body>
    	<h1>CSS Counters Demo:</h1>
    	<h3>HTML Tutorial</h3>
    	<h3>CSS Tutorial</h3>
    	<h3>JavaScript Tutorial</h3>
    </body>
    </html>
    

    In the above example using content variable we have inserted "Counter Value" in each <h3> tag and there is also a counter used which will increment Counter Value.

    You can check the output of above example here: https://jsfiddle.net/jbktux1g/

     

 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: