How to Make Custom Bullet Points With CSS

ul {
  list-style: none;
}

ul.complete li::before {
  content: '✔️ ';
}

ul.incomplete li::before {
  content: '❌ ';
}

// Will produce the following
✔️ Learn about HTML
✔️ Learn about CSS
❌ Learn about JavaScript

<h1>Table of Contents</h1>
<h1>The Tale of CSS</h1>
<h1>Acknowledgments</h1>

<style>
  /* Number headings with counters: */
  body {
    counter-reset: heading;
  }

  h1:before {
    content: counter(heading) “) ”;
    counter-increment: heading;
  }
</style>

<-- Will produce the following: -->
1) Table of Contents
2) The Tale of CSS
3) Acknowledgments