Posted By

gavgrif on 03/26/18


Tagged

css html


Versions (?)

CSS counters


 / Published in: CSS
 

CSS counters can be used to create indexing / numbering of elements in the page - all that has to be done is to initialise the counter, increment it and then use a :before or :after pseudo-element to display it.

Use the following style rules:

ul { list-style: none; counter-reset: index; }

ul li { counter-increment: index; }

ul li::before { content: counters(index, ".") "- "; }

  1. <ul>
  2. <li>Parent</li>
  3. <li>Parent
  4. <ul>
  5. <li>Child
  6. <ul>
  7. <li>Grandchild</li>
  8. <li>Grandchild</li>
  9. <li>Grandchild</li>
  10. </ul>
  11. </li>
  12. <li>Child
  13. <ul>
  14. <li>Grandchild</li>
  15. <li>Grandchild</li>
  16. <li>Grandchild</li>
  17. </ul>
  18. </li>
  19. <li>Child
  20. <ul>
  21. <li>Grandchild</li>
  22. <li>Grandchild</li>
  23. <li>Grandchild</li>
  24. </ul>
  25. </li>
  26. </ul>
  27. </li>
  28. <li>Parent
  29. <ul>
  30. <li>Child</li>
  31. <li>Child</li>
  32. <li>Child</li>
  33. </ul>
  34. </li>
  35. <li>Parent
  36. <ul>
  37. <li>Child</li>
  38. <li>Child</li>
  39. <li>Child</li>
  40. </ul>
  41. </li>
  42. </ul>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: elianahermione on March 26, 2018

google

You need to login to post a comment.