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

Adding all the properties of li

Adding all the properties of li

Problem

Hi I am trying to add all the Properties of a li which is in a single ul.

HTML:

  • Sample Li to have all the properties
CSS: ul li{ list-style-type : disc | circle | lower-aplha etc..., }

Is it possible to add?

Problem courtesy of: user1853128

Solution

It is possible using the CSS counters.

ul {
    counter-reset: my-counter;
    list-style-type: none;
}
ul li:before {
    content: counter(my-counter, disc)
             counter(my-counter, circle)
             counter(my-counter, lower-alpha) "." 
             counter(my-counter, decimal ) ".";
             /* etc... */
    counter-increment: my-counter;
}

jsFiddle Demo

Result


Available list types:

disc        (• • •)
circle      (○ ○ ○)
square      (▪ ▪ ▪)
decimal     (1 2 3)
decimal-leading-zero (01, 02, 03)
lower-roman (i ii iii)
upper-roman (I II III)
lower-greek (α β γ)
lower-latin (a b c)
upper-latin (A B C)
armenian    (Ա Բ Գ)
georgian    (ა ბ გ)
lower-alpha (a b c)
upper-alpha (A B C)

For further reading:

  • Using CSS counters.
  • Numbering in style.
Solution courtesy of: Itay

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

Adding all the properties of li

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×