CSS Lists: bullets, numbering and modern styles

Customize lists without losing semantics: clear bullets, continuous numbering and modern layouts.

How much do you know about CSS?

📘 Theory

Reset and controlled spacing

Start by removing browser styles to define your own rhythm.

Lists come with default margin and padding. If you do not control them, the layout looks misaligned.

Use padding-inline-start to define indentation and list-style-position to choose where the bullet falls.

If there are titles or icons, align the list with the rest of the content using the same vertical rhythm.

Remove margin-top/bottom to avoid jumps between sections.
Define padding-inline-start in rem so it scales with typography.
Try list-style-position: inside when lines are long.

Modern bullets with ::marker

::marker allows styling the bullet without hacks.

With ::marker you can change color, weight and content of the bullet while keeping semantics.

If you need complex icons, combine list-style: none with ::before.

Avoid heavy images: simple bullets scale better in modern UIs.

Use ::marker for color and weight without breaking the layout.
list-style: none removes bullets when designing a card list.
Do not use large images: it affects readability and performance.

Continuous numbering with counters

Ideal when you separate steps into blocks but want continuous numbering.

Counters let you control numbering without depending on HTML.

Define the counter on the container and increment on each li.

If you need to continue in another list, you can reset the counter with an initial value.

Lists as modern layout

A list can be a menu, tags or a light grid.

With flex or grid you can turn a list into a row of tags or cards.

Remove bullets, define gap and control wrapping for responsiveness.

You keep the list semantics but with a modern UI appearance.

1 Reset and controlled spacing 2 Modern bullets with ::marker 3 Continuous numbering with counters 4 Lists as modern layout

🧪 Learn by doing

Example Bullets with color A highlighted bullet without losing semantics.

⌄

Example Numbered steps Custom numbering without depending on HTML.

⌄

Example Tag list Transform a list into a set of tags.

⌄

🏁 Challenges

Challenge Challenge: numbering with counter Set up a counter to display numbers in the marker.

⌄

🧰 Resources

Useful links

HTML Lesson: lists and semantics MDN list-style MDN ::marker W3Schools CSS Lists

Test

Check your knowledge with a test about CSS.

Test for CSS

Course resources 78

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 10

Intrinsic sizing: min-content, max-content, fit-content and auto

Lesson 12

Tables in CSS: Readable, Compact and Responsive

›