The list-style-position property specifies the position of the list-item markers (bullet points).

/* the second line of a long list item stars underneath the first letter of the first line */
ul {
    list-style-position: outside;
}

• This line item has been shortened so you can see how the second line will fall compared to the bullet

/* the second line of a long list item stars underneath the bullet */
ul {
    list-style-position: inside;
}

• This line item has been shortened so you can see how the second line will fall compared to the bullet

Default value	outside
Inherited values	yes
Can it be animated?	no

These are the allowed values.

Value	Description
inside	The bullet points will be inside the list item
outside	The bullet points will be outside the list item (default)
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_ul').style.listStylePosition = 'inside';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_ul').style.listStylePosition = 'inside';
}
</script>

---