display: list-item, the default for <li>, generates a marker, controlled by three longhands and the list-style shorthand:
list-style-type: a keyword (disc, square, decimal, decimal-leading-zero, lower-roman, upper-alpha), a language system (simp-chinese-informal, hiragana, arabic-indic), a quoted string such as "✓ ", a name defined with @counter-style (Other At-rules), or none.
list-style-position: outside (default) hangs the marker in the padding; inside puts it on the first line, so wrapped lines run under it.
list-style-image: url(star.svg) uses an image you cannot size or align, so a ::before icon is usually better.
The ::marker pseudo-element styles the marker itself. Chrome 1 and Firefox 555 allow color, font-*, content and a few others; Safari 10 supports only color and font-size, so change the symbol with list-style-type rather than ::marker { content }. For markers with boxes or backgrounds, build your own with a CSS counter.
<style>
body { display: flex; gap: 24px; margin: 8px; font: 14px/1.5 system-ui, sans-serif; }
ol, ul { margin: 0; padding-left: 28px; }
.cn { list-style: simp-chinese-informal; padding-left: 52px; }
.done { list-style-type: "\2713 "; } .done li::marker { color: #2e7d32; font-weight: bold; }
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; margin-bottom: 4px; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center;
width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #1565c0;
color: #fff; }
</style>
<ol class="cn" start="9"><li>Nine</li><li>Ten</li><li>Eleven</li></ol>
<ul class="done"><li>Design</li><li>Build</li><li>Test</li></ul>
<ol class="steps" role="list"><li>Install</li><li>Configure</li><li>Deploy</li></ol>