CSS Lists

<ul class="custom-bullets">
<li>Custom circle bullets</li>
<li>Styled list item</li>
<li>With custom colors</li>
</ul>
<ol class="custom-numbers">
<li>Custom numbering</li>
<li>Using list-style</li>
<li>Properties</li>
</ol>

.custom-bullets {
list-style-type: circle;
color: #6366f1;
}
.custom-bullets li { margin: 4px 0; }
.custom-numbers {
list-style-type: upper-roman;
color: #059669;
}
.custom-numbers li { margin: 4px 0; }

<ul class="no-bullets">
<li>Navigation link</li>
<li>Navigation link</li>
<li>Navigation link</li>
</ul>

.no-bullets {
list-style: none;
padding-left: 0;
}
.no-bullets li {
padding: 8px 16px;
background: #eef2ff;
margin: 4px 0;
border-radius: 4px;
font-weight: bold;
color: #6366f1;
}
.no-bullets li:hover { background: #6366f1; color: white; cursor: pointer; }

<ul class="marker-demo">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

.marker-demo li::marker {
color: #059669;
font-weight: bold;
content: "▶ ";
}
.marker-demo li { margin: 4px 0; padding-left: 8px; }