dataprismcore3.sbs

and

Written by

pw

in

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

This article explains the meaning and usage of the CSS utility classes shown in the title — a combination commonly seen with utility-first frameworks (like Tailwind CSS) — and shows practical examples and tips for applying them to HTML lists.

What each part means

    &]:pl-6” data-streamdown=“unordered-list”>

  • list-inside — places list markers (bullets) inside the content flow so they align with the first line of the list item instead of hanging outside the content box. Useful when you want bullets to sit next to wrapped text.
  • list-disc — sets the list marker style to a filled circle (disc). Other options include list-decimal, list-none, etc.
  • whitespace-normal — sets normal white-space handling: sequences of whitespace collapse, and text wraps at word breaks. Ensures long lines wrap instead of overflowing.
  • [li&]:pl-6 — a bracketed variant selector that targets the list item element (li) when used with a parent class. In utility frameworks that support arbitrary variants, this applies pl-6 (padding-left) to each li inside the element. The & represents the parent selector; li& means “for li elements nested in this container.” pl-6 adds left padding (typically 1.5rem in Tailwind defaults).

Why combine them

  • Bullets placed inside plus left padding gives consistent spacing when list items wrap to multiple lines.
  • whitespace-normal avoids unexpected overflow when list items contain long words or inline elements.
  • The bracketed variant ensures only list items receive the padding, not the entire list container, keeping layout precise.

Example HTML

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item that displays normally.</li>  <li>Long item that will wrap to multiple lines to demonstrate how the bullet and padding behave when text breaks onto a second line in the same list item.</li>  <li>Item with <a href=”#”>inline link</a> and other inline elements to show wrapping and spacing remain tidy.</li></ul>

Practical tips

    &]:pl-6” data-streamdown=“unordered-list”>

  • If markers still look misaligned when items have different font sizes, consider using marker:text-sm or similar marker utilities (if available) to match marker size to text.
  • For nested lists, apply pl-6 or larger on nested ul/ol to increase indentation for clarity.
  • When using custom fonts with unusual metrics, test wrapping and marker alignment across browsers; minor adjustments to pl or ml may be required.
  • If you want markers outside the content box while preserving wrap behavior, use list-outside combined with pl-6 on li instead.

Accessibility note

Ensure list usage conveys semantic grouping (use

    or

      appropriately). Avoid visually hiding markers if they are the only cue for structure; instead, use CSS to style them accessibly.

      Quick summary

      • Use list-inside list-disc to keep bullets aligned with the first line.
      • Add whitespace-normal so text wraps naturally.
      • [li_&]:pl-6 to apply consistent left padding to each list item for tidy wrapped lines.

Comments

Leave a Reply

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

More posts