CSS Lists

List Style Types

🔸 Unordered List Types

/* Different bullet styles */
.disc-list { list-style-type: disc; }
.circle-list { list-style-type: circle; }
.square-list { list-style-type: square; }
.none-list { list-style-type: none; }

<ul class="disc-list">
    <li>Disc bullets (default)</li>
    <li>Filled circles</li>
</ul>

<ul class="circle-list">
    <li>Circle bullets</li>
    <li>Hollow circles</li>
</ul>

<ul class="square-list">
    <li>Square bullets</li>
    <li>Filled squares</li>
</ul>

🔸 Ordered List Types

/* Different numbering styles */
.decimal-list { list-style-type: decimal; }
.upper-roman { list-style-type: upper-roman; }
.lower-alpha { list-style-type: lower-alpha; }
.upper-alpha { list-style-type: upper-alpha; }

<ol class="decimal-list">
    <li>First item</li>
    <li>Second item</li>
</ol>

<ol class="upper-roman">
    <li>First item</li>
    <li>Second item</li>
</ol>

🔹 Custom List Images

Replacing default list bullets with custom images using list-style-image or ::before pseudo-elements adds branding and visual interest. list-style-image: url('icon.png') is simple but offers limited sizing control. For more flexibility, use list-style: none and apply ::before with content: '', background-image, and positioning. This allows SVG icons, responsive sizing, and better alignment. Ensure images are accessible: provide alt text via CSS or hide decoratively from screen readers. Custom bullets enhance readability in long lists, highlight key items, and maintain visual consistency across branded content.

/* Custom bullet image */
.custom-bullets {
    list-style-image: url('star.png');
}

/* Better approach with background */
.icon-list {
    list-style: none;
    padding-left: 0;
}

.icon-list li {
    background: url('checkmark.png') no-repeat left center;
    padding-left: 25px;
    margin-bottom: 5px;
}

<ul class="icon-list">
    <li>Task completed</li>
    <li>Another task done</li>
    <li>All items checked</li>
</ul>

🔹 List Position

Controlling list marker position with list-style-position (inside or outside) affects text alignment and flow in multi-line items. outside (default) places markers in the margin, keeping text indented neatly. inside brings markers into the content flow, useful for compact designs or when using custom backgrounds. For precise control, reset default styles and use ::before pseudo-elements with absolute positioning. This enables alignment with flexbox or grid layouts, consistent spacing in multi-column lists, and responsive adjustments via media queries. Proper positioning improves readability, especially in long, nested, or documentation-style lists.

/* List marker position */
.inside-list {
    list-style-position: inside;
    border: 1px solid #ccc;
    padding: 10px;
}

.outside-list {
    list-style-position: outside;
    border: 1px solid #ccc;
    padding: 10px;
}

<ul class="inside-list">
    <li>Inside position - marker is inside the content area</li>
    <li>Text wraps under the marker</li>
</ul>

<ul class="outside-list">
    <li>Outside position - marker is outside the content area</li>
    <li>Text doesn't wrap under the marker</li>
</ul>

🔹 Styling List Items

Styling individual list items involves spacing, borders, backgrounds, and interactive states to create structured, scannable content. Use padding and margin to separate items, and border-bottom for dividers. Alternating background colors (:nth-child(even)) improve readability. For interactive lists, add :hover highlights and :focus outlines. Icons or checkmarks via ::before can indicate status. In navigation, list items become menu links with full-width click areas. These techniques transform plain lists into engaging components, enhancing both aesthetics and functionality across blogs, dashboards, and e-commerce pages.

/* Styled list items */
.styled-list {
    list-style: none;
    padding: 0;
}

.styled-list li {
    background: #f0f8ff;
    margin: 5px 0;
    padding: 10px;
    border-left: 4px solid #007cba;
    border-radius: 4px;
}

.styled-list li:hover {
    background: #e6f3ff;
    cursor: pointer;
}

<ul class="styled-list">
    <li>Beautifully styled list item</li>
    <li>Hover over me to see the effect</li>
    <li>Custom background and border</li>
</ul>

🔹 Navigation Lists

Creating horizontal navigation menus from lists requires resetting defaults, applying display: inline-block or flex, and managing spacing. Remove bullets with list-style: none and zero out margins/padding. Use display: inline-block for simple menus, or flexbox for better alignment and distribution. Add padding for touch targets, and use text-transform or icons for visual hierarchy. Responsive versions stack vertically on small screens via media queries. Ensure accessibility with semantic HTML (<nav>, ARIA labels) and keyboard navigation support. This approach produces clean, maintainable navigation that works across browsers and devices.

/* Horizontal navigation */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background: #333;
    border-radius: 5px;
}

.nav-list li {
    flex: 1;
}

.nav-list a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    text-align: center;
    transition: background 0.3s;
}

.nav-list a:hover {
    background: #555;
}

<ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>