all reset
☀ Lights
Netbax Online Editor Try it Yourself
Run
HTML
reset
copy
Enter Text
Enter Text
Enter Text
Enter Text
Enter Text
Enter Text
Enter Text
CSS
reset
copy
li { counter-increment: count; } li:before { content: counter(count); } li:nth-child(-n+9):before { content: '0'counter(count); } li { text-align: center; box-sizing: border-box; position: relative; list-style: none; padding: 20px 40px; background: #0cf; box-shadow: 2px 3px 5px rgba(0,0,0,0.15); color: #000; display: table; width: 320px; margin: 0 auto 20px; text-transform: uppercase; border-radius:4px; } li:before { position: absolute; top:16px; left: -20px; display: inline-block; width: 36px; padding: 5px 0 4px; text-align: center; background: #007FFF; color: #fff; box-shadow: 0 0 12px rgba(0,0,0,0.25); border-radius:4px; }