I want to show order list as below using class. I have tried but its not working,please help me How I can do it?
1. List item
1.1 list item
(a) lit item a
(b) list item b
2. List item
2.1 list item
(a) lit item a
(b) list item b
.listStyle08 {
counter-reset: item;
}
.listStyle08 ol {
counter-reset: item;
}
.listStyle08 li {
display: block;
}
.listStyle08 li:before {
content: counters(item, ".") " ";
counter-increment: item;
display: inline-block !important;
padding-right: 10px;
}
Here is a jsfiddle with a working solution.
The styles are copied here for convenience:
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section, ".") ". ";
}
li li:before {
counter-increment: section;
content: counters(section, ".") " ";
}
ol ol ol {
counter-reset: list;
margin: 0;
}
ol ol ol > li {
list-style: none;
position: relative;
}
ol ol ol > li:before {
counter-increment: list;
content: "(" counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em;
}
Sources:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With