list-inside list-decimal whitespace-normal [li&]:pl-6
This article explains the utility, behavior, and practical use of the CSS utility class combination list-inside list-decimal whitespace-normal [li&]:pl-6. It’s written as a concise reference for frontend developers who use utility-first frameworks (e.g., Tailwind CSS) or craft custom utility sets.
What it does (summary)
- list-inside: Renders list markers (numbers) inside the content box of list items rather than outside, letting marker and text share the same left padding.
- list-decimal: Uses decimal numbers (1., 2., 3., …) as list markers.
- whitespace-normal: Allows text to wrap normally; collapses sequences of whitespace and breaks lines at normal wrap opportunities.
- [li&]:pl-6: A variant selector applying left padding (pl-6 → typically 1.5rem) to each
lielement inside the current scope. The syntax ([li&]) is a bracketed variant pattern used in Tailwind-like processors to target nested selectors; here it compiles to a rule that appliespadding-left: 1.5remto list items.
When to use this combination
Use this set when you want a numbered list with:
- Markers visually aligned with item content (inside the content box),
- Standard numeric markers,
- Text wrapping normally within list items,
- Extra left padding applied to each list item for consistent indentation beyond the marker.
This is useful for:
- Documentation pages where list content includes long sentences or inline code that should wrap,
- Forms or settings panels where indented numbered steps improve scannability,
- Components shared across projects where consistent item padding is required.
CSS behavior and compiled output (example)
Assuming Tailwind-like utilities, the compiled CSS might look like:
.list-inside { list-style-position: inside; }.list-decimal { list-style-type: decimal; }.whitespace-normal { white-space: normal; }/bracketed variant compiles to a nested selector targeting li children */.your-scope [li&]:pl-6 li { padding-left: 1.5rem; }In practice the variant typically becomes something like:
.some-parent li { padding-left: 1.5rem; }Accessibility considerations
- &]:pl-6” data-streamdown=“unordered-list”>
- With
list-inside, screen readers still announce list semantics correctly; however visual alignment differs — ensure sufficient contrast and spacing. - Avoid excessive padding that could confuse the association between marker and content for users with low vision.
- If list items contain long code snippets or unbreakable strings, add word-break utilities (e.g.,
break-words) to prevent overflow.
Examples
HTML:
<ul class=“list-inside list-decimal whitespace-normal [li&]:pl-6”> <li>First step: install dependencies and verify versions.</li> <li>Second step: configure environment variables and secrets.</li> <li>Third step: run migrations and seed the database; this may wrap to a second line.</li></ul>Rendered effect:
- &]:pl-6” data-streamdown=“unordered-list”>
- Numbered markers appear inside the box.
- Item text wraps normally across lines.
- Each
lihas extra left padding so wrapped lines align comfortably.
Tips and alternatives
- If you prefer markers outside the content flow, use
list-outsideinstead oflist-inside. - For tighter control over marker spacing, consider custom CSS using
::markerto style the marker separately. - If using pure CSS without utility tooling:
.my-list { list-style-position: inside; list-style-type: decimal; white-space: normal;}.my-list li { padding-left: 1.5rem; }Summary
list-inside list-decimal whitespace-normal [li&]:pl-6 is a concise utility combo that creates readable, wrapped, indented numbered lists with markers inside the content box—ideal for documentation and UI lists where consistent padding and normal wrapping are required.
Leave a Reply