How to add order list number without "ol" and "ul" element by CSS for all browsers?

If you want to number things in your website without “ol” and “ul” element. It also is pretty reasonable that you want to style those numbers. In this Article we will show how it can be done with the :before pseudo element, which can have a counter as a value to the content property.

But let it be known, applying numbered counters is not limited to ordered lists. For instance, let’s say you wanted to number the question and answer pairs of a FAQ list.

Each new “dt” element is a new question, hence where we should apply the numbering. It’s as simple as this:

These are default list styles in all browsers.

  • disc (• • •)
  • circle (○ ○ ○)
  • square (▪ ▪ ▪)
  • decimal (1 2 3)
  • decimal-leading-zero (01, 02, 03)
  • lower-roman (i ii iii)
  • upper-roman (I II III)
  • lower-greek (α β γ)
  • lower-latin (a b c)
  • upper-latin (A B C)
  • armenian (Ա Բ Գ)
  • georgian (ა ბ გ)
  • lower-alpha (a b c)
  • upper-alpha (A B C)

If you want to show “lower-roman”, “upper-roman” and “decimal” etc. specify which in the counter value itself: