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
4	12	1	1	3.5	1
Tablets / Mobile
≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 3rd November 2019