This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

list-style-position

Summary

Specifies if the list-item markers should appear inside or outside the content flow.

Overview table

Initial value
outside
Applies to
elements with ‘display: list-item’
Inherited
Yes
Media
visual
Computed value
as specified
Animatable
No
CSS Object Model Property
listStylePosition

Syntax

  • list-style-position: inherit
  • list-style-position: inside
  • list-style-position: outside

Values

outside
Default. Marker is placed outside the list item, and any wrapping text is not aligned under the marker.
inside
Marker is placed inside the text, and any wrapping text is aligned under the marker.
inherit
Takes the same specified value as the property for the element’s parent. (Acts similarly to other uses of inherit in CSS.)

Examples

The following example uses the list-style-position attribute and the list-style-position property to set the position for markers.

.firstlist { list-style-position:inside }
.secondlist { list-style-position:outside }

View live example

The following example shows how to change the value dynamically using JavaScript. The value changes from outside to inside when the mouse is over the list

var ul = document.getElementById('list-hover');

// When the mouse is over the list, the position changes to inside
ul.addEventListener('mouseover', function () {
    ul.style.listStylePosition = 'inside';
});

// When the mouse is not longer over the list, we revert back the value to outside
ul.addEventListener('mouseout', function () {
    ul.style.listStylePosition = 'outside';
});

View live example

An example to show how setting padding-left to 0 when position is set to outside will produce the market not being shown at all. A ul contained in a div with overflow hidden might run into this issue.

ul {
    padding-left: 0;
}

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

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

View live example

Usage

 ===Remarks===

If a list-style-position is set to outside and padding-left is set to 0, the marker will not show.

Related specifications

CSS Level 2 (Revision 1)
Recommendation

See also

Related articles

CSS Attributes

Related pages

Attributions