Can you style ordered list numbers?

by

You can do this using CSS counters, in conjunction with the :before pseudo element:

 ol {
   list-style: none;
   counter-reset: item;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;
 }
 li:before {
   margin-right: 10px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;
   color: white;
   width: 1.2em;
   text-align: center;
   display: inline-block;
 }
<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

More Related Contents:

  1. Does UL have default margin or padding [duplicate]
  2. How to keep indent for second line in ordered lists via CSS?
  3. Li item on two lines. Second line has no margin
  4. How to display an unordered list in two columns?
  5. How can you customize the numbers in an ordered list?
  6. CSS: Control space between bullet and
  7. How to make a display in a horizontal row
  8. Responsive Separator for Horizontal List
  9. Removing ul indentation with CSS
  10. HTML + CSS: Ordered List without the Period?
  11. How do I justify a horizontal list?
  12. Best way to manage whitespace between inline list items
  13. Change the color of a bullet in a html list?
  14. HTML + CSS: Numbered list with numbers inside of circles
  15. HTML ordered list 1.1, 1.2 (Nested counters and scope) not working
  16. How to center an unordered list?
  17. HTML list-style-type dash
  18. Is it possible to specify a starting number for an ordered list?
  19. How can I prefix ordered list item numbers with a static string using CSS?
  20. Adding text before list
  21. Set width on div
  22. How to Make columns in row [closed]
  23. Is it wrong to change a block element to inline with CSS if it contains another block element?
  24. :last-child not working as expected?
  25. Horizontal list items
  26. Stretch background image css?
  27. Bootstrap – align button to the bottom of card
  28. How do I add a highlight behind the text via CSS so it looks like Instagram-one below?
  29. How to remove indentation from an unordered list item?
  30. How do I vertically align something inside a span tag?

Leave a Comment