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 JavaScriptCopied 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) AcknowledgmentsCopied to clipboard!
Resource
Remove ads
Want to get weekly updates to your mailbox? 📬
📚 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
