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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 355
    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


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

    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:


 0 Comment(s)

Sign In

Sign up using

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: