CSS list listStylePosition property
CSS List listStylePosition Property
Description
The list-style position property affects the position of a marker within the content of a list item.
Possible Values
| Sr.No. | Value & Description |
|---|---|
| 1 | none NA |
| 2 | inside If the text falls on a second line, the text will wrap below the marker. It will also be indented to where the text would have started if the list value was outside. |
| 3 | outside If the text falls on a second line, the text will align with the start of the first line (to the right of the marker). |
Applies to
All elements that display list items.
DOM syntax
object.style.listStylePosition = "inside";
Example
Here is the example –
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li> <li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
This will produce the following result −
