Html
copy
reset
Run
Netbax Online Editor Try it Yourself
<ul> <li>Enter Text</li> <li>Enter Text</li> <li>Enter Text</li> <li>Enter Text</li> <li>Enter Text</li> <li>Enter Text</li> <li>Enter Text</li> </ul> <style> 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; } </style>
