list-inside list-disc whitespace-normal [li&]:pl-6
This article explains the utility and meaning of the CSS class-like string “list-inside list-disc whitespace-normal [li&]:pl-6”, breaking down each part, showing when to use it, and providing practical examples.
What each part means
- list-inside — place list markers (bullets) inside the content flow so lines wrap under the marker instead of aligning under the text.
- list-disc — use solid circular bullets as the list marker.
- whitespace-normal — allow normal wrapping and collapsing of white space; text wraps at whitespace and consecutive spaces collapse to one.
- [li&]:pl-6 — a utility variant targeting list item elements (li) using a custom selector; it applies padding-left at the 1.5rem (pl-6) scale to each li. The pattern ”[li&]:pl-6” is a form of arbitrary variant syntax used by utility-first CSS frameworks to scope a utility to a specific selector.
Why combine these
- Combining these utilities creates a compact, readable list where bullets are visually inside the text block, lines wrap naturally, and each list item gets consistent left padding for alignment or visual offset. This is useful in tight layouts (cards, sidebars) or when you want bullets to align with text while preserving an internal indent.
When to use
- Use when you need bullets inside the content box, want wrapping lines to align under the bullet, and also need additional left padding on each li for visual balance.
- Useful in responsive components where wrapping behavior and alignment must remain consistent across sizes.
- Avoid if you prefer hanging bullets (use list-outside) or need precise cross-browser spacing that relies on manual rules.
Example (conceptual)
- HTML:
- ul element with classes: list-inside list-disc whitespace-normal [li&]:pl-6
- Visual effect:
- &]:pl-6” data-streamdown=“unordered-list”>
- • First item that is long and wraps to a second line, with the wrapped line starting under the bullet and the whole li indented by 1.5rem.
Accessibility and browser notes
- list-inside can change how screen readers and focus outlines appear; test with assistive tech.
- Arbitrary variant selectors like ”[li&]:pl-6” require a CSS framework that supports them (e.g., modern Tailwind builds). If not supported, fallback to a standard rule: ul.my-list li { padding-left: 1.5rem; }.
- Check spacing across browsers; default list styles vary slightly, so combining utilities may need tweaks (e.g., setting marker-offset or margin resets).
Quick recipe
- &]:pl-6” data-streamdown=“ordered-list”>
- Add class string to your ul: class=“list-inside list-disc whitespace-normal [li&]:pl-6”
- Confirm your build pipeline supports arbitrary variants.
- Test wrapping and alignment at different widths.
- If markers misalign, adjust with marker-offset, padding, or switch to list-outside and manual margins.
This combination gives a neat, wrapped, and padded list suited for compact UI elements while relying on utility CSS conventions.
Leave a Reply