Understanding CSS List-Style Properties
Lists are fundamental to web content, organizing information in digestible chunks that improve readability and user engagement. Whether you're building navigation menus, product feature comparisons, or step-by-step tutorials, proper list styling ensures your content communicates clearly while maintaining visual consistency.
The approach to list styling has evolved significantly with modern web development practices, enabling developers to create sophisticated list designs that enhance user experience while maintaining semantic HTML structure.
The Three Core Properties
CSS provides three primary properties for controlling list appearance:
list-style-type: Establishes the marker symbol or numbering systemlist-style-position: Determines whether markers appear inside or outside the principal block boxlist-style-image: Enables using custom images as list markers
Modern CSS has evolved significantly with the introduction of the ::marker pseudo-element, offering developers unprecedented control over list markers while maintaining semantic HTML integrity. When combined with techniques from our guide on modern CSS techniques, list styling becomes a powerful tool for creating distinctive interfaces.
1ul {2 list-style-type: square;3}4 5ol {6 list-style-type: upper-roman;7}8 9.special-list {10 list-style-type: "\1F44D";11}12 13ul, ol {14 list-style-position: inside;15}Options for unordered and ordered lists
Unordered Lists
disc, circle, square, none, or custom characters
Ordered Lists
decimal, lower-alpha, upper-alpha, lower-roman, upper-roman
Custom Markers
Emoji or Unicode characters as bullets
Extensive Counter Styles
Armenian, chinese, cjk-ideographic, and more
The Modern CSS ::marker Pseudo-Element
The ::marker pseudo-element represents the marker box of a list item, containing the bullet or number. This CSS feature has achieved broad browser support, landing in Chrome 86+, Edge 86+, Firefox 68+, and Safari 11.1+ web.dev's guide to custom bullets with CSS ::marker.
Properties That Work With ::marker
The allowed properties include animation and transition properties, color, direction, unicode-bidi, and white-space, font properties for size, family, weight, and style, and the content property for custom markers. This selective property support ensures marker rendering remains performant while allowing meaningful customization web.dev's guide to custom bullets with CSS ::marker.
Properties That Cannot Be Styled
Background properties cannot be applied to ::marker elements, which means approaches like adding colored backgrounds to bullets require alternative techniques using pseudo-elements that support background styling. This limitation exists because markers are rendered in their own special box type optimized for text-based bullet and numbering content. Additionally, layout properties like padding, margin, and display are not applicable to maintain consistent rendering across browsers.
Performance Considerations
The ::marker pseudo-element is optimized for performance in modern browsers because it leverages the browser's existing list marker rendering infrastructure. Unlike list-style-image with large images that can introduce latency during initial page load, ::marker styling has minimal performance impact. Using CSS variables with ::marker further optimizes performance by enabling efficient style recalculation across multiple list instances without triggering expensive layout recalculations.
For teams implementing React applications, understanding marker performance characteristics helps create smoother user interfaces that scale effectively.
1li::marker {2 color: #ff4800;3 font-size: 1.2em;4}5 6li:first-child::marker {7 font-size: 1.5em;8}9 10.feature-list li::marker {11 content: "\2713"; /* Checkmark */12 color: #00823a;13 font-weight: bold;14}Browser Support
86+
Chrome
68+
Firefox
11.1+
Safari
86+
Edge
Performance and Best Practices
Rendering Performance
List styling has minimal performance impact when implemented correctly. The ::marker pseudo-element is optimized for performance in modern browsers, while list-style-image with large images can introduce latency during initial page load. Using inline SVG data URIs or sprite sheets for multiple marker types balances visual flexibility with performance.
Accessibility Considerations
List markers contribute to content accessibility by providing visual anchors that help users navigate through list content. When customizing markers, ensure sufficient color contrast between markers and their background. Avoid removing markers entirely without providing alternative visual differentiation.
Screen readers interpret list structure based on HTML semantics rather than visual styling. Therefore, maintaining proper ul, ol, and li elements ensures assistive technologies correctly announce list content. Custom markers should enhance rather than replace the semantic meaning of lists.
Responsive List Design
List styling should adapt to different viewport sizes and device capabilities. Marker sizes should scale appropriately with text, typically using relative units like em or rem:
li::marker {
font-size: 0.875em;
}
@media (max-width: 600px) {
li::marker {
font-size: 1em;
}
}
Use Relative Units
Marker sizes should scale with text using em or rem
Maintain Contrast
Ensure markers have sufficient color contrast
Preserve Semantics
Keep proper ul/ol/li structure for accessibility
Optimize Images
Use SVG or data URIs for custom bullets
Frequently Asked Questions
Sources
- MDN Web Docs - Styling Lists - Comprehensive coverage of list-specific CSS properties
- HubSpot - Your Guide to CSS list-style - Practical guide covering list-style properties
- web.dev - Custom bullets with CSS ::marker - Google's authoritative resource on ::marker
- MDN Web Docs - list-style-type - Complete reference for all list-style-type values
- W3C CSS Lists and Counters Module Level 3 - Official W3C specification for ::marker