How can I prefix ordered list item numbers with a static string using CSS?

by

The only pure CSS way is with counters:

ol {
    counter-reset: item;
    list-style-type: none;
}

ol li:before {
    content: 'Q' counter(item, decimal) '. ';
    counter-increment: item;
}

You cannot achieve this besides using CSS counters (which were designed specifically for such use cases!) or JavaScript.

By the way, it’s decimal, not numbered.

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. Can you style ordered list numbers?
  20. Adding text before list
  21. How do you keep parents of floated elements from collapsing? [duplicate]
  22. How do I change the color of radio buttons?
  23. How can I draw vertical text with CSS cross-browser?
  24. Is clearfix deprecated?
  25. CSS-Only Scrollable Table with fixed headers [duplicate]
  26. Make link in table cell fill the entire row height
  27. I have position but z index is not working
  28. Different implementation of Flexbox in Firefox and Chrome
  29. How do I horizontally center an absolute positioned element inside a 100% width div? [duplicate]
  30. Can you have a within a ?

Leave a Comment