• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » CSS » How To Create Auto Increment Using CSS Counter

How To Create Auto Increment Using CSS Counter

By Sigit Prasetya Nugroho ∙ September 12, 2016 ∙ CSS ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

Make the numbering style using CSS counter, is an alternative to creating list in addition to HTML element. Counter is one of the CSS function which might be rarely used by programmers beginners like me. Maybe we are accustomed to using looping to create a counter or may not even know that the CSS has the ability to make auto increment.

Table of Contents

  • 1 What is CSS Counter ?
    • 1.1 The following examples use the CSS counter in base

What is CSS Counter ?

According to www3schools.com, the counters resemble a “variables”, where the value of the variable can be incremented automatically using specific rules by CSS. In short, you can create ordered list using all of HTML element.

How To Create Auto Increment With Css Counter

There is 3 basic attributes that must be used on CSS counter, namely:

  • counter-reset: is used to declare a variable. If the initial value is not given then the variable will start at zero.
  • counter-increment: used to add a counter value.
  • counter(variable, type output): used to make the output of the variable, along with the type of each.

The following examples use the CSS counter in base

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div id="content">
  <div class="article">
    This is section one
  </div>
  <div class="article">
    This is section two  
  </div>
  <div class="article">
    This is section three  
  </div>
  <div class="article">
    This is section four
  </div>
  <div class="article">
    This is section five  
  </div>
  <div class="article">
    This is section six  
  </div>
  <div class="article">
    This is section seven  
  </div>
  <div class="article">
    This is section eight  
  </div>
</div>
 
<style>
.content {
  counter-reset: item 0;
}
 
.article {
  counter-increment: item;
}
 
.article:before {
  content: counter(item);
  display: inline;
}
 
</style>

Css Counter Example 1

Moreover, we can do the increment with different values. for example, if you want to increase 3 points, the writing counter as follows

1
2
3
4
5
6
7
8
9
10
11
12
.content {
  counter-reset: item 0;
}
 
.article {
  counter-increment: item 3;
}
 
.article:before {
  content: counter(item);
  display: inline;
}

Css Counter Example 2

We can display the results in the form of the alphabet in the following ways:

1
2
3
4
5
6
7
8
9
10
11
12
.content {
  counter-reset: item 0;
}
 
.article {
  counter-increment: item 1;
}
 
.article:before {
  content: counter(item,lower-alpha);
  display: inline;
}

Css Counter Example 3

In addition to lower-alpha, we can replace it with the following values

  • decimal.
  • upper-alpha.
  • lower-roman.
  • upper-roman

Thus my brief tutorial on How To Create Auto Increment Using CSS “Counter”, may be useful.

Another CSS Related Post :

  • Free Simple Admin Dashboard Bootstrap 4 By Seegatesite
  • 4 Best Sites To Download School And Education Icons Sets
  • How to Make a Shake Effect Validation Like the WordPress Login Form
  • [CSS] How To Fixed Select2 Responsive Width
  • Upgrade Responsive Bootstrap Table Using Footable Plugin
  • How To Centering And Make Full Width Youtube Iframe On Blog Article

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com