Lists
CSS gives you control over list markers (bullets, numbers) and their positioning.
Demo: List Styling
HTML
<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> CSS
.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; }Live Output Window
List Properties
| Property | What It Does |
|---|---|
list-style-type | Marker style (disc, circle, decimal, upper-roman, none, etc.) |
list-style-position | Inside vs outside the list item |
list-style-image | Custom image as marker |
list-style | Shorthand for all above |
Removing List Styles
Demo: No Markers
HTML
<ul class="no-bullets">
<li>Navigation link</li>
<li>Navigation link</li>
<li>Navigation link</li>
</ul> CSS
.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; }Live Output Window
Custom Markers with ::marker
Demo: Custom ::marker
HTML
<ul class="marker-demo">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul> CSS
.marker-demo li::marker {
color: #059669;
font-weight: bold;
content: "▶ ";
}
.marker-demo li { margin: 4px 0; padding-left: 8px; }Live Output Window