The list-style-position property allows to define the position (inside or outside of the list item box) for the leading symbol/ image that is rendered for each list item.
The possible values are.
inside | |
outside | (default value) |
snippet
<html>
<head>
<style>
body *{ border: 1px solid #000000}
</style>
</head>
<body>
<ul style="list-style-type: cicle; list-style-position: inside">
<li>item 1</li>
<li>item 2</li>
</ul>
<ul style="list-style-type: square; list-style-position: outside">
<li>item 1</li>
<li>item 2</li>
</ul>
<ul style="list-style-image: url('bullet-1.png'); list-style-position: inside">
<li>item 1</li>
<li>item 2</li>
</ul>
</body>
</html>
