fluxstoragehub3.cfd

in

Written by

pw

in

list-inside list-disc whitespace-normal [li&]:pl-6

This article explains the utility and behavior of the utility-class combination list-inside list-disc whitespace-normal [li&]:pl-6, showing when and how to use it in modern CSS utility frameworks (like Tailwind CSS) and plain CSS equivalents.

What this combination does (brief)

  • list-inside — places list markers (bullets) inside the content box of each list item so the bullet participates in the line box and moves with wrapped lines.
  • list-disc — sets the list marker style to a filled circle (disc).
  • whitespace-normal — allows text to wrap normally within the list item (default line wrapping).
  • [li&]:pl-6 — a variant selector (Tailwind-style arbitrary variant) that applies padding-left: 1.5rem to the parent when the selector targets the list item; effectively it adjusts left padding on the list items via a complex selector. In this syntax, li& means “for the parent when a child li matches”, so the resulting CSS targets the list container when it contains li and applies pl-6 there — used for nuanced layout adjustments.

Why you’d use it

  • Keep bullets visually aligned with wrapped text while preserving an indentation comfortable for reading.
  • Ensure consistent wrapping behavior inside list items so long sentences break naturally.
  • Apply precise padding rules scoped to list items without writing custom CSS, using utility framework power.

Example usage (Tailwind)

  • Use when you want inner bullets (not hanging) and consistent wrapping; good for UI lists, FAQs, or documentation.
  • Combine with margin and text utilities for spacing and typography.

Plain CSS equivalent

  • list-style-position: inside;
  • list-style-type: disc;
  • white-space: normal;
  • li selector with padding-left: 1.5rem;

Accessibility notes

  • Ensure sufficient contrast and spacing.
  • For long wrapped items, list-inside keeps bullets tied to the first line — verify visual clarity.

Quick tips

  • If you prefer hanging bullets (marker outside), use list-outside instead.
  • If markers overlap text when narrow, increase left padding or switch to list-outside.
  • Test across browsers — marker rendering can vary slightly.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts