CSS Lists

Style unordered (<ul>) and ordered (<ol>) lists with list-style properties, create custom bullets, and reset lists for navigation menus.

1) List Style Type


ul.disc     { list-style-type: disc; }
ul.circle   { list-style-type: circle; }
ul.square   { list-style-type: square; }
ol.decimal  { list-style-type: decimal; }
ol.roman    { list-style-type: lower-roman; }
  • disc (default)
  • item
  • circle
  • item
  • square
  • item
  1. decimal
  2. item
  1. lower-roman
  2. item

2) List Style Position


ul.inside  { list-style-position: inside; }
ul.outside { list-style-position: outside; } /* default */

inside

  • Bullets/number appear inside the content block and wrap with the text, useful in narrow columns.
  • Another long item that shows wrapping behavior.

outside (default)

  • Bullets/number stay outside the text box; wrapped lines align with text.
  • This is the most common layout in paragraphs.

3) List Style Image


ul.logo {
  list-style-image: url('../asset/img/bullet.png');
}

Use a small, well-aligned image. If alignment is tricky, prefer a ::before bullet (see below).

4) Shorthand


ul { list-style: square inside; } /* type position image? */

5) Reset Lists for Navigation


.reset   { list-style: none; margin: 0; padding: 0; }
.nav-like{ display: flex; gap: 10px; }

6) Custom Bullets with ::before


.fancy   { list-style: none; padding: 0; margin: 0; }
.fancy li{ position: relative; padding-left: 24px; }
.fancy li::before{
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg,#1E88E5,#43A047);
}
  • Gradient bullet
  • Easy to align
  • Works across browsers

7) Color Default Bullets with ::marker


.marker-demo li::marker { color: #1E88E5; }
  • Color just the bullet
  • Simple & clean

8) Numbered Steps with CSS Counters


.steps      { counter-reset: step; }
.steps li   { list-style: none; position: relative; padding-left: 42px; }
.steps li::before{
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: #1E88E5; color: #fff; display: grid; place-items: center;
}
  1. Gather requirements
  2. Design & prototype
  3. Build & test

9) Nested Lists


ul.level-1 { list-style-type: disc; }
ul.level-1 ul { list-style-type: circle; }
ul.level-1 ul ul { list-style-type: square; }
  • Item
    • Child
      • Grandchild

Quick Notes:

  • list-style shorthand: type position image.
  • Use list-style-position: inside in narrow columns to keep bullets aligned with wrapped lines.
  • For navs/menus, reset lists and use flex/grid for layout.
  • ::marker can color bullets; for full custom shapes, use ::before and list-style:none.
  • CSS counters help build step lists and custom numbering.