MoreLesson 202Free preview

List Without Bullets

This lesson is part of How To · All levels

Summary

Bullet-free lists are created by removing the built-in marker via the list-style: none, then resetting the margin and padding. Despite the changing appearance, the ul and li elements remain to provide a good semantic structure for the screen reader. Additional styles such as border, icon, or flexbox can make the list interesting without bullet.

Key points

Use list-style-type: none or list-style: none to remove the bullet
Reset margin and padding so that the list does not leave any inherent indentation
Maintain the ul and li elements for a structure that is accessible
Custom markers can be created with pseudo-elements::before

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.