Loading...

Powerful New CSS for Styling Bullets, Numbers, and List Markers

4,511 views

Loading...

Loading...

Transcript

The interactive transcript could not be loaded.

Loading...

Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Oct 1, 2019

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/Ba...

Loading...

When autoplay is enabled, a suggested video will automatically play next.

Up next


to add this to Watch Later

Add to

Loading playlists...