midCSS
Styling lists: list-style-type and list-style-position?
Updated Apr 28, 2026
Short answer
These properties control the appearance and layout of bullet points or numbers in ul and ol elements.
Deep explanation
list-style-type changes the marker (e.g., square, decimal, lower-alpha, or even a custom string). list-style-position determines whether the marker sits outside the text block (the default) or inside the content flow, acting like an inline element.
Real-world example
Creating custom decorative bullet points and ensuring the wrapped text aligns correctly beneath the bullet instead of hanging outside.
Common mistakes
- Using `list-style: none` but forgetting to remove default browser `padding-left`, resulting in visually indented empty space.
Follow-up questions
- How do you use an image as a list marker?