<style> ol { list-style: none; counter-reset: steps; } ol li { counter-increment: steps; } ol li::before { content: counter(steps); margin-right: 0.5rem; background: red; color: white; width: 1.2em; height: 1.2em; border-radius: 50%; place-items: center; display: inline-grid; line-height: 1.2em; } ol ol li::before { background: dark; } </style> <ul><ol> <li>test 1</li> <li>test 2</li> <li>test 3</li> <li>test 4</li> <li>test 5</li> </ol></ul>