list-style-image
Use a picture instead of a bullet.
index.html
HTML
<style>
ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><circle cx="6" cy="6" r="5" fill="orange"/></svg>');
}
</style>
<ul>
<li>A list item with an orange dot as its marker</li>
<li>Another item</li>
</ul>It works, but you have little control over the size and alignment of the image. For anything more precise, hide the marker and draw your own with ::before. See Custom Lists.
list-style-position
Where the marker is placed relative to the text block.
index.html
HTML
<style>
li { background: #fdf2e9; margin-bottom: 4px; }
.out { list-style-position: outside; }
.in { list-style-position: inside; }
</style>
<ul class="out">
<li>outside (default): the marker hangs to the left and the second line aligns with the first.</li>
</ul>
<ul class="in">
<li>inside: the marker is part of the text box and the second line wraps underneath it, which usually looks worse.</li>
</ul>Leave it at outside unless you have a reason.
The shorthand
list-style combines all three: list-style: square inside; or list-style: none;.
lightbulb
Remove everything at once
list-style: none; is the common shorthand for “no bullets and no images”.