CSS provides several properties to control the appearance of HTML lists. You can change the bullet or numbering style, use custom images, and control the position of the marker. These properties work for both ordered (<ol>) and unordered (<ul>) lists, as well as <li> elements.
How List Markers Work: The marker (bullet, number, or image) is rendered by the browser before each <li> item. The list-style-type property lets you choose from built-in marker types (disc, square, decimal, lower-alpha, etc.), while list-style-image allows you to use a custom image. list-style-position controls whether the marker is inside the content box (flows with text) or outside (default, aligns with the list edge).
Accessibility & Best Practices: Always ensure your list markers are visible and meaningful. Custom images should be clear and high-contrast. For navigation menus, consider using ARIA roles and semantic HTML. Avoid removing list markers for important content, as they help users scan and understand structure.
Advanced Tips: You can combine list properties for creative effects, such as using emojis or SVGs as markers, or styling ::marker in modern browsers for even more control. The list-style shorthand lets you set all three properties at once.
Lists are essential for structuring content, navigation menus, and more. Customizing list styles improves readability and visual appeal.
ul.disc-list {
list-style-type: disc;
}
ul.square-list {
list-style-type: square;
}
ul.circle-list {
list-style-type: circle;
}
ol.lower-alpha-list {
list-style-type: lower-alpha;
}
ul.inside-list {
list-style-position: inside;
}
ul.outside-list {
list-style-position: outside;
}
ul.image-list {
list-style-image: url('https://img.icons8.com/color/32/super-mario.png');
}
ul.shorthand-list {
list-style: square inside url('https://img.icons8.com/color/32/super-mario.png');
}