Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • An Overview To Counter-Reset Property In CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 509
    Comment on it

    Hello readers, Today in my blog I will discuss about Counter-reset property used in CSS.


    Introduction :-

    The Counter-Reset property basically uses both the counter-increment and content properties of CSS.

    The counter-increment property is used to create auto-incrementing counters within a web page while the content property helps us to display the counter values that has been generated.


    The Syntax for Counter-Reset is given below-:

    Syntax :-

    ( [<user-ident> <integer>?]+ | none )

    In the above syntax each element has its meaning where :-

    • <user-ident> This identifies the name of the counter that you want to reset.
    • <integer > The Integer uses the value to reset the counter.
    • None keyword is used to disable the counter.


    Below is an example showing the use of Counter-Reset Property, here is the code for it :-<

    !DOCTYPE html>
    <html lang="en">
    <title>Example of CSS counter-reset property</title>
    <style type="text/css">
    body {
    counter-reset: section;
    h1 {
    counter-reset: category;
    h1:before {
    counter-increment: section;
    content: " " counter(section) ". ";
    h2:before {
    counter-increment: category;
    content: counter(section) "." counter(category) " ";
    <h2>Master Graduate</h2>

    Hence, the Counter-Reset property can be used for various purposes inside a web page.


    Note :- The Counter-Reset property  works on all modern browsers.


 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: