Style Lists with New CSS — Bullets, Numbers, Markers

When you create lists in HTML, browsers add bullet-points (for unordered lists) and numbers (for ordered lists). Now CSS gives us the tools to style those list "markers", and even create our own!

- Use the ::marker pseudo element to style list bullets & numbers
- Use display: list-item to add a counter on any element
- Use counter-reset and counter-increment to create your own counters
- Use counter() and counters() to control how counter numbers are displayed

I'll also show you how the ::marker element is different from ::before or ::after.

Demo: https://codepen.io/mirisuzanne/pen/BaBKowO?editors=0100

Видео Style Lists with New CSS — Bullets, Numbers, Markers канала Mozilla Developer