Customizing HTML lists | Boyle Software, Inc.

<li>

The bullets and numbers in HTML lists can easily be customized. Using the CSS content property we can give the bullets a different color or display the numbers in a bold font. The content property is used to generate content before or after an HTML element via the :before and :after pseudo-elements.

HTML

<ul>
  <li>Bread</li>
  <li>Liverwurst</li>
  <li>Mustard</li>
</ul>

<ul>

<li>Bread</li>

<li>Liverwurst</li>

<li>Mustard</li>

</ul>

CSS

Bullets – different color

By default, HTML list bullets inherit the color that is set for the <li> element:

Bread
Liverwurst
Mustard

Using the :before pseudo element we can set and/or change some of its properties:

ul.color li {
  text-indent: -1.1em;
}
ul.color li:before {
  content: "• ";
  color: orange;
  font-size: 1.8em;
  vertical-align: middle;
}

ul.color li {

text-indent: -1.1em;

}

ul.color li:before {

content: "• ";

color: orange;

font-size: 1.8em;

vertical-align: middle;

}

Bullets – different style

We can also use a different bullet type with unicode characters:

ul.carets li {
  text-indent: -1.1em;
}
ul.carets li:before {
  content: "\00BB";
  opacity: 0.5;
  padding-right: 10px;
}

ul.carets li {

text-indent: -1.1em;

}

ul.carets li:before {

content: "\00BB";

opacity: 0.5;

padding-right: 10px;

}

(You can find any special character you wish to use with the HTML Entity Lookup tool.)

Bold list numbers

If you want to highlight the numbers of an ordered list, you need to first eliminate the default counter and apply a new counter that we can then style:

ol {
  counter-reset: item;
}
ol li {
  counter-increment: item;
  text-indent: -1.9em;
}
ol li:before {
  color: #000;
  display: inline-block;
  width: 1.5em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
}

ol {

counter-reset: item;

}

ol li {

counter-increment: item;

text-indent: -1.9em;

}

ol li:before {

color: #000;

display: inline-block;

width: 1.5em;

padding-right: 0.5em;

font-weight: bold;

text-align: right;

content: counter(item) ".";

}

Demo:

See the Pen Custom HTML lists by Uwe Kristen (@ukristen) on CodePen.