list-style-position

Controls the bullet (marker) position of list items. lspi places the bullet inside the content flow, while lspo places it outside.

Class List

Class	CSS	Description
`lspi`	list-style-position: inside	Places bullet inside content flow
`lspo`	list-style-position: outside	Places bullet outside content (default)

Visual Comparison

Compares the bullet position difference between inside and outside.

inside — lspi

Bullet positioned inside content
Same flow as text
On wrap, text aligns under the bullet

outside — lspo

Bullet positioned outside content
Default
On wrap, text aligns with the bullet

Class Details

`lspi`list-style-position: inside

Places the bullet inside the list item content flow. The bullet is included inline in the first line of text, and wrapping text continues below the bullet.

<!-- Bullet inside content -->
<ul class="lsd lspi pl0">
  <li>Bullet is on the same line as text</li>
  <li>Clean alignment with padding-left: 0</li>
  <li>Suitable for lists inside cards</li>
</ul>

`lspo`list-style-position: outside

Default value. Places the bullet outside the list item content. Text aligns next to the bullet on wrap, providing better readability.

<!-- Bullet outside content (default) -->
<ul class="lsd lspo pl2rem">
  <li>Bullet is positioned outside the text</li>
  <li>Text aligns with bullet on line wrap</li>
  <li>Suitable for document lists</li>
</ul>

Tips & Notes

inside + padding-left combination

When using lspi, applying pl0 aligns the bullet neatly within the content area.

list-style-type table-list