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
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>

  /* Number headings with counters: */
  body {
    counter-reset: heading;

  h1:before {
    content: counter(heading) β€œ) ”;
    counter-increment: heading;

<-- Will produce the following: -->
1) Table of Contents
2) The Tale of CSS
3) Acknowledgments
Copied to clipboard!
How to Make Custom Bullet Points With CSS
If you would like to see more Webtips, follow @flowforfrank


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
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.