Markers are the bullets on a list with items.
The list-style-position property specifies a marker position.
They can be displayed inside or outside the list items.
A list with list-style-position set to outside.
<ul style="list-style-position: outside">
<li>Vincent Van Gogh</li>
<li>Henri Matisse</li>
<li>Paul Gauguin</li>
</ul>
list-style-position: inside | outside | initial | inherit;
| Value | Description |
|---|---|
| inside | Markers display inside the list items. |
| outside | Default. Markers display outside (further to the left). |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different list-style-position values.
<style>
.list-style-position-example {
list-style-position: inside;
}
</style>
<ul class="list-style-position-example">
<li>Vincent Van Gogh</li>
<li>Henri Matisse</li>
<li>Paul Gauguin</li>
</ul>
This table shows when list-style-position support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
