body { font-family: helvetica, arial, sans-serif; color: #f8f8f8; background: #1a1a1a; } h1, h2 { font-weight: lighter; } section { width: 45%; float: left; padding: 5px; } .oldschool li { color: green; } .oldschool span { color: lime; } .counter { counter-reset: list; } .counter li { list-style: none; position: relative; color: lime; } .counter li::before { counter-increment: list; content: counter(list) '.'; position: absolute; top: 0px; left: -1.2em; color: green; } .animated li::before { transition: 0.5s; color: green; } .animated li:hover::before { color: white; transform: scale(1.5); } .zeropadded li::before { content: counter(list,decimal-leading-zero) '.'; left: -2em; } .lower-roman li::before { content: counter(list,lower-roman) '.'; left: -2em; } .upper-roman li::before { content: counter(list,upper-roman) '.'; left: -2em; } .georgian li::before { content: counter(list,georgian) '.'; left: -2em; } .armenian li::before { content: counter(list,armenian) '.'; left: -2em; } .lower-latin li::before { content: counter(list,lower-latin) '.'; left: -2em; } .upper-latin li::before { content: counter(list,upper-latin) '.'; left: -2em; } .lower-greek li::before { content: counter(list,lower-greek) '.'; left: -2em; }
<h1>Simple things: styling ordered lists</h1> <section> <h2>No CSS</h2> <ol> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section> <section> <h2>Element padded</h2> <ol class="oldschool"> <li><span>Collect underpants</span></li> <li><span>???</span></li> <li><span>Profit</span></li> </ol> </section> <section> <h2>Using Counter</h2> <ol class="counter"> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section> <section> <h2>Using Counter and transitions</h2> <ol class="counter animated"> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section> <section> <h2>Zero padded</h2> <ol class="counter zeropadded"> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section> <section> <h2>Lower Roman</h2> <ol class="counter lower-roman"> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section> <section> <h2>Upper Roman</h2> <ol class="counter upper-roman"> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section> <section> <h2>Georgian</h2> <ol class="counter georgian"> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section> <section> <h2>Armenian</h2> <ol class="counter armenian"> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section> <section> <h2>Lower Latin</h2> <ol class="counter lower-latin"> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section> <section> <h2>Upper Latin</h2> <ol class="counter upper-latin"> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section> <section> <h2>Lower Greek</h2> <ol class="counter lower-greek"> <li>Collect underpants</li> <li>???</li> <li>Profit</li> </ol> </section>