CSS list-style-position Property

Description

The list-style-position property determines the location of the marker / number relative to the list item (located inside the list item along with the content, or outside the list item).

Initial value
outside
Applies to
List item elements
Inherited
Yes
Media
Visual
Computed value
Specified value
Animatable
No
CSS Version
CSS1, CSS2, CSS3
JavaScript syntax
object.style.listStylePosition

Syntax

list-style-position: inside | hanging | outside

Values

  • insideMarker is placed inside the text, and any wrapping text is aligned under the marker.
  • hangingAs inside, except the marker is instead placed immediately before the first text or significant whitespace in the list item or its children.
  • outsideMarker is placed outside the list item, and any wrapping text is not aligned under the marker.
  • inherit

Example

<ul class="test"> 
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ul>
<ul class="test2">
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ul>
li {
   border: 1px solid orange;
}
.test {
   list-style-position: outside; 
   background: khaki; 
}
.test2 {
   list-style-position: inside;
   background: khaki; 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
412113.51
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤371841411.0

Last updated by CSSPortal on: 3rd November 2019