• Post category:CSS

What is CSS list style position Property | How to Use it

 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:

css list style position

If we change the value of the “list-style-position” property to “outside“. The output will be displayed in the below image.

css list style position

Leave a Reply