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

HTML

<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>

CSS

li {
   border: 1px solid orange;
}
.test {
   list-style-position: outside; 
   background: khaki; 
}
.test2 {
   list-style-position: inside;
   background: khaki; 
}

Result