Tutorial by Examples

CSS body { counter-reset: item-counter; } .item { counter-increment: item-counter; } .item:before { content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */ } HTML <div class='item'>Item...

CSS body { counter-reset: item-counter; /* create the counter */ } .item { counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */ } .item-header:before { content: counter(item-counter) ". "; /* print the v...

CSS ul { list-style: none; counter-reset: list-item-number; /* self nesting counter as name is same for all levels */ } li { counter-increment: list-item-number; } li:before { content: counters(list-item-number, ".") " "; /* usage of counters() function means val...