The CSS list-style-position property is used to set marker position of list items. The default value for this property is outside which sets the marker outside the list item.
Syntax
The syntax of CSS list-style-position property is as follows −
Selector {
list-style-position: /*value*/
}Example
The following examples illustrate CSS list-style-property −
<!DOCTYPE html>
<html>
<head>
<style>
li {
width: 50%;
margin: 5px;
font-size: 120%;
box-shadow: 0 0 3px 1px black;
background: url("https://www.tutorialspoint.com/dbms/images/dbms.jpg") no-repeat 32px 8px;
list-style-position: inside;
padding: 0 0 10px 20px;
}
ol ol li {
list-style: lower-roman;
list-style-position: outside;
}
</style>
</head>
<body>
<ol>
<li>Black</li>
<li>
Blue
<ol>
<li>Green</li>
<li>Red</li>
</ol>
</li>
<li>Yellow</li>
<li>Red</li>
</ol>
</body>
</html>Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
width: 200px;
box-shadow: inset 0 0 6px green;
list-style-position: outside;
}
ul + ul {
list-style-type: circle;
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
</html>Output
This gives the following output −
