list-style-position

The list-style-position property designates the position of the list-item markers.

Syntax

list-style-position: outside; sets the list-item marker outside the list-item. list-style-position: inside; sets the list-item marker inside the list-item, so it will be part of the list-item’s text and push the text at the start.

ul.one {
  list-style-position: outside;
}

ul.two {
  list-style-position: inside;
}

Values

inside
List-item markers will be inside the list item.

outside
Default value. List-item markers will be outside the list item.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of list-style-position? Submit a codepen.io demo and we'll showcase it here ↴