CSS for Lists

Bullets

  • Juice
  • Milk
  • Bread
  • Cheese

list-style-type: square;

  • Juice
  • Milk
  • Bread
  • Cheese

::marker pseudo-element

.red_bullets li::marker {
  color: red;
}
  • Juice
  • Milk
  • Bread
  • Cheese
.stars li::marker {
  content: "\2605 ";
  text-align: left;
}
  • Juice
  • Milk
  • Bread
  • Cheese

list-style-image: url(/images/logos/html5.svg);

.html_list {
  list-style-image: url(/images/logos/html5.svg);
}
  • Paragraphs
  • Lists
  • Tables
  • Figures

::marker pseudo-element

.css_list {
  list-style-image: url(/images/logos/css3.svg);
}

.css_list li {
  line-height: .6;
}

.css_list li::marker {
  font-size: 2rem;
}
  • Colors
  • Typography
  • Layout
  • Media Queries

Due to the lack of control over certain aspects of the images in bullets the CSS can be written to remove the actual bullets from the list, and put background images in place of the bullets.

  • Underscore
  • jQuery
  • React
  • Node
.js_list {
  padding-left: 1rem;
  list-style-type: none;
}

.js_list li {
  background-image: url(/images/logos/css3.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 1.2rem;
}

While this uses more code, sometimes that’s the trade off for getting your HTML to look exactly how you want it to.

Numbers

  1. One
  2. Two
  3. Three
  4. Four

::marker pseudo-element

  1. One
  2. Two
  3. Three
  4. Four
.blue_numbers li::marker {
  color: blue;
  font-size: 2rem;
  line-height: 0;
}

list-style-position: inside; and list-style-type: upper-roman;

  1. One
  2. Two
  3. Three
  4. Four

CSS Counters

CSS counters can help you replicate how numbered lists work.

Sample CSS Counters