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