dataprismcore5.sbs

py-1 [&>p]:inline

Written by

pw

in

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

What this utility class combination does

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

  • list-inside: places bullet markers inside the content box so list markers are part of the content flow.
  • list-disc: uses filled circle (disc) markers for list items.
  • whitespace-normal: collapses and wraps whitespace normally so long lines wrap instead of preserving extra spaces.
  • [li&]:pl-6: applies padding-left (pl-6) to each li element (the & is a placeholder for the element selector in some utility frameworks), shifting item content to the right while keeping markers aligned.

When to use it

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

  • When you want compact lists where bullets stay with the content (not hanging outside).
  • When list items contain long text that should wrap naturally.
  • When you need extra left padding on list items for visual alignment or to match other indented content.

Example HTML

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>This is a long list item that will wrap to the next line normally without preserving extra whitespace and will have extra left padding applied to the item content.</li>  <li>Short item</li>  <li>Another item with more text to demonstrate wrapping and alignment with the disc marker.</li></ul>

Accessibility tips

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

  • Ensure sufficient contrast between text and background.
  • Keep list items concise where possible; long paragraphs in lists can be harder to scan.
  • Use semantic
      /

    • elements rather than forced CSS-only structures.

Quick troubleshooting

  • If bullets appear outside the box, confirm there’s no conflicting list-outside or reset styles.
  • If padding isn’t applied, ensure your utility framework supports the arbitrary selector syntax ([li&]:pl-6) and that it’s enabled in the build configuration.
  • For inconsistent wrapping, check parent styles for white-space overrides.

Variations

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

  • Use list-decimal instead of list-disc for numbered lists.
  • Swap pl-6 for pl-4 or pl-8 to adjust indentation
  • md:[li&]:pl-8) for different paddings at breakpoints.

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

More posts