🎯 CSS list-style-position Property

The CSS list-style-position property defines where the list marker (bullet or number) is placed in relation to the list item content. It controls whether the marker appears inside or outside the content box of the list item.

In simple terms, it decides how list bullets or numbers align with text inside <ul> and <ol> elements.

The default value. The marker is placed outside the content box of the list item. If the text wraps, the second line is not aligned under the marker.

ul {
  list-style-position: outside;
}
                

Example result:

• Lorem ipsum dolor sit amet,
consectetur adipiscing elit.

✔ The bullet stays outside the text block.

The marker is placed inside the content box. If the text wraps, the second line aligns with the bullet.

ul {
  list-style-position: inside;
}
                

• Lorem ipsum dolor sit amet,
consectetur adipiscing elit.

✔ The text behaves like part of the list item block.

Resets the property to its default value (outside).

ul {
  list-style-position: initial;
}
                

Inherits the value from the parent element.

ul {
  list-style-position: inherit;
}