Styling Components›Extra· 25 min read

Styling Lists

Change bullet styles, remove them entirely, and use lists as a layout tool.

What you will learn

Change or remove list markers
Use list-style shorthand
Style list items

Marker control

list-style-type changes the bullet (circle, square, none, decimal...). list-style: none removes it — essential for navbars and custom lists.

Markers: square, and removed

<style>
  .square { list-style-type: square; color:#4338ca; }
  .none { list-style: none; padding-left: 0; }
  .none li { padding: 8px; border-bottom: 1px solid #e6e8f0; }
</style>
<ul class="square"><li>Square bullets</li><li>Like this</li></ul>
<ul class="none"><li>No bullets</li><li>Custom rows instead</li></ul>

Live preview

The first list (.square) uses list-style-type: square to swap the round bullet for a small square. The second list (.none) uses list-style: none to remove the markers entirely, and padding-left: 0 to drop the empty indent the bullets left behind. Then .none li adds padding and a bottom border to each item — turning a bare list into clean, separated rows. This “remove the bullets, restyle the items” move is the foundation of navbars and most custom lists.

Tip: You can even use an emoji or image as a custom bullet, or replace markers entirely with a ::before pseudo-element (covered later).

Q. How do you remove the bullets from a list?

Answer: list-style: none removes the markers — the first step in turning a list into a navbar or custom layout.

✍️ Practice

Change a list to use square markers.
Remove bullets from a list and add a bottom border to each item.

🏠 Homework

Style a “features” list on your landing page without default bullets.