CSS list style position
In this article, we will see what is CSS list style position. If we use or create an unordered list, we can use the CSS list-style-position property.
What is list-style-position
It is used to specify the position of the bullet symbol with respect to the list item’s border area.
Values: outside | inside
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
*{
width: 70%;
}
ul{
list-style-type: circle;
list-style-position: outside;
}
ul > li{
border: 1px solid black;
}
</style>
<ul >
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</body>
</html>Output:
If we change the value of the “list-style-position” property to “outside“. The output will be displayed in the below image.
