Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How i can create dynaminc ordered list items with pure css

How i can create dynaminc ordered list items with pure css

Problem

I wants to make the Ordered list like mentioned below image.

So how i can make this ordered list with Pure Css.....

As i will increase the list item boxes numbers should dynamically increase with increased list item boxes.

Problem courtesy of: Shailender Arora

Solution

Hey Shailender Arora Now you can used Counter properties and do this with Pure css

As like this

HTML

Css

li {
float:left;
background:#e6e6e6;
  width:100px;
  height:100px;
  list-style-type:none;
  margin:10px;
}

li {
counter-increment:shail;
}

li:after {
  content:counter(shail);
}

Live demo http://tinkerbin.com/xq0uATYn

Solution courtesy of: Rohit Azad

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How i can create dynaminc ordered list items with pure css

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×