p]:inline” data-streamdown=”list-item”>7 Tips for Faster Bitmap Font Writing and Optimization

Tailoring CSS for Nested Ordered Lists: list-inside list-decimal whitespace-normal [li&]:pl-6

When building nested ordered lists in modern web layouts, controlling numbering, spacing, and indentation is essential for readability and visual hierarchy. The utility combination list-inside list-decimal whitespace-normal [li&]:pl-6 (commonly used in utility-first CSS frameworks like Tailwind CSS) provides a concise way to achieve a clean, readable nested ordered list. This article explains what each utility does, why you might combine them, and how to apply them practically with examples and tips.

What each utility does

• list-inside — Places list markers (numbers) inside the content box, so the numbers are part of the flow and wrap with the list item text.
• list-decimal — Uses decimal numbering (1., 2., 3.) for ordered lists.
• whitespace-normal — Ensures text wraps normally within list items, preventing forced unbroken lines.
• [li&]:pl-6 — A selector-targeted utility that applies left padding (pl-6) to each direct li child; the bracketed form targets the li elements inside the list via a selector variant (e.g., Tailwind’s arbitrary variants). This increases indentation for each item without moving the marker created by list-inside too far from the text.

&]:pl-6”>
This is a short item.  
This is a longer list item that will wrap to multiple lines and demonstrates how the marker stays inside the flow.  
Item with nested content:    
      
Nested item one.      
Nested item two with a long line that wraps to show indentation.