Decorate Ordered Numbered list CSS
Decorate Ordered Numbered list CSS
This is the code of decorating the ordered list in CSS. You can write the code according to your own choice. We need to set the CSS for each of the ol and li tags.
Code of Decorating the Ordered Numbered list CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html> <head> <style> ol { max-width: 300px; counter-reset: my-awesome-counter; list-style: none; padding-left: 50px; } ol li { margin: 0 0 0.5 rem 0; counter-increment: my-awesome-counter; position: relative; padding-top: 7px; } ol li::before { content: counter(my-awesome-counter); color: #fcd000; font-size: 1.5rem; font-weight: bold; position: absolute; –size: 28px; left: calc(-1 * var(–size) – 10px); line-height: var(–size); width: var(–size); height: var(–size); top: 0; transform: rotate(-20deg); background: green; border-radius: 50%; text-align: center; box-shadow: 3px 3px 0 black; } body { } </style> </head> <body> <ol> <li>T4Tutorials</li> <li>T4Tutorials B</li> <li>T4Tutorials C</li> <li>T4Tutorials D</li> </ol> </body> </html> |