Style the marker with ::marker
The ::marker pseudo-element styles only the bullet or number. You can change its color and size.
index.html
HTML
<style>
li::marker { color: #d94a00; font-weight: bold; }
</style>
<ul><li>First</li><li>Second</li></ul>
<ol><li>First</li><li>Second</li></ol>Custom checkmarks with ::before
Remove the normal marker and draw your own.
index.html
HTML
<style>
.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.checks li::before {
content: "✓";
position: absolute; left: 0; top: 0;
color: #fff; background: #27ae60;
width: 20px; height: 20px; border-radius: 50%;
text-align: center; font-size: 13px; line-height: 20px;
}
</style>
<ul class="checks">
<li>Free shipping over $30</li>
<li>Thirty-day returns</li>
<li>Gift wrapping available</li>
</ul>Each item has position: relative so the checkmark can be placed with position: absolute in its own corner. Positioning is covered in CSS Position.
Counters
Counters number things automatically, even when the items are not in an <ol>.
index.html
HTML
<style>
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; margin-bottom: 8px; }
.steps li::before { content: "Step " counter(step) ": "; font-weight: bold; color: #d94a00; }
</style>
<ul class="steps">
<li>Choose a book</li>
<li>Add it to the basket</li>
<li>Check out</li>
</ul>counter-reset starts a counter, counter-increment adds 1 for each item, and counter() prints it.
Exercise: arrow bullets
Make a list where each item starts with an orange arrow → instead of a bullet.
Show a possible solution
style.css
PHP
ul { list-style: none; padding-left: 0; }
li::before { content: "→ "; color: #d94a00; }