Lists Tests

ul

default

Multiple levels

Multiple levels of numbers

  1. First
  2. Second
    1. Sub-1
    2. Sub-2
      1. Sub-sub-1
      2. Sub-sub-2
      3. Sub-sub-3
    3. Sub-3

list-style: disc

list-style: square

list-style: circle

list-style: inside url(list-item.png)

list-style: outside url(list-item.png)

list-style: outside url(90s-bg.png)

list-style: outside url(data:image/png)

ol

default

  1. First
  2. Second
  3. Third

list-style: decimal

  1. First
  2. Second
  3. Third

list-style: decimal-leading-zero

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry

list-style: lower-alpha

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry
  11. Another Entry
  12. Another Entry
  13. Another Entry
  14. Another Entry
  15. Another Entry
  16. Another Entry
  17. Another Entry
  18. Another Entry
  19. Another Entry
  20. Another Entry
  21. Another Entry
  22. Another Entry
  23. Another Entry
  24. Another Entry
  25. Another Entry
  26. Another Entry
  27. Another Entry
  28. Another Entry
  29. Another Entry
  30. Another Entry

list-style: upper-alpha

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry
  11. Another Entry
  12. Another Entry
  13. Another Entry
  14. Another Entry
  15. Another Entry
  16. Another Entry
  17. Another Entry
  18. Another Entry
  19. Another Entry
  20. Another Entry
  21. Another Entry
  22. Another Entry
  23. Another Entry
  24. Another Entry
  25. Another Entry
  26. Another Entry
  27. Another Entry
  28. Another Entry
  29. Another Entry
  30. Another Entry

list-style: upper-roman

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry
  11. Another Entry
  12. Another Entry
  13. Another Entry
  14. Another Entry
  15. Another Entry
  16. Another Entry
  17. Another Entry
  18. Another Entry
  19. Another Entry

list-style: lower-roman

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry
  11. Another Entry
  12. Another Entry
  13. Another Entry
  14. Another Entry
  15. Another Entry
  16. Another Entry
  17. Another Entry
  18. Another Entry
  19. Another Entry

list-style: outside lower-roman url(list-file.png)

  1. First
  2. Second
  3. Third
  4. Another Entry
  5. Another Entry
  6. Another Entry
  7. Another Entry
  8. Another Entry
  9. Another Entry
  10. Another Entry
  11. Another Entry
  12. Another Entry
  13. Another Entry
  14. Another Entry
  15. Another Entry
  16. Another Entry
  17. Another Entry
  18. Another Entry
  19. Another Entry

'none' values

list-style: none

list-style: none square

list-style: square none

list-style: url(list-item.png) none

list-style: none none

list-style: inside none none

list-style: square none none (error)

list-style: none none none (is an error)