Adding text before list

by

You need CSS counters:

#customlist {
  /* delete default counter */
  list-style-type: none;
  /* create custom counter and set it to 0 */
  counter-reset: elementcounter;
}

#customlist>li:before {
  /* print out "Element " followed by the current counter value */
  content: "Element " counter(elementcounter) ": ";
  /* increment counter */
  counter-increment: elementcounter;
}
<ol id="customlist">
  <li>Elephant</li>
  <li>Bird</li>
  <li>Lion</li>
</ol>

More Related Contents:

  1. Can I use a :before or :after pseudo-element on an input field?
  2. Does UL have default margin or padding [duplicate]
  3. Font Awesome 5 on pseudo elements shows square instead of icon
  4. How to keep indent for second line in ordered lists via CSS?
  5. Html/Css Triangle with pseudo elements
  6. Li item on two lines. Second line has no margin
  7. :after and :before CSS pseudo elements hack for Internet Explorer 7
  8. How to display an unordered list in two columns?
  9. CSS content property: is it possible to insert HTML instead of Text?
  10. How can you customize the numbers in an ordered list?
  11. CSS: Control space between bullet and
  12. How to make a display in a horizontal row
  13. Responsive Separator for Horizontal List
  14. Removing ul indentation with CSS
  15. HTML + CSS: Ordered List without the Period?
  16. Why does a filter gradient on a pseudo element not work in IE8?
  17. How do I justify a horizontal list?
  18. Best way to manage whitespace between inline list items
  19. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  20. HTML + CSS: Numbered list with numbers inside of circles
  21. HTML ordered list 1.1, 1.2 (Nested counters and scope) not working
  22. How to center an unordered list?
  23. Which elements support the ::before and ::after pseudo-elements?
  24. HTML list-style-type dash
  25. Is it possible to specify a starting number for an ordered list?
  26. How can I prefix ordered list item numbers with a static string using CSS?
  27. Can you style ordered list numbers?
  28. Using attr(data-icon) property to display unicode before element
  29. after pseudo element not appearing in code
  30. pseudo-element acting like a grid item in CSS grid

Leave a Comment