How to Make Custom Bullet Points With CSS

You can easily make custom bullet points for HTML lists with the use of CSS ::before pseudo-element.

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
bullets.css
Copied to clipboard!

Using ::before for Numbering

Another common trick that ::before elements can be used are for numbering headings, for example in a table of contents:

<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
numbers.html
Copied to clipboard!
How to Make Custom Bullet Points With CSS
If you would like to see more Webtips, follow @flowforfrank

Resource

Remove ads
Remove ads

πŸ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. β˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
πŸŽ‰ Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.