How to set the list-item marker appear inside the content flow in CSS ?

Last Updated : 18 May, 2023

The task is to set the list-item marker to appear inside the content flow in CSS. To specify the type of list item marker you can use the list-style-type and list-style-position property. Content flow is the set of rules that defines which element comes before another one, which one sits on top of another one etc.

list-style-type: It is used to specify the type of list-item marker in a list.
list-style-position: It is used to specify the position of the list-item markers.

Syntax –

list-style-position: value;

Where value is –

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

Approach –

Create the HTML file with the list element.
Using list-style-position property to set the list-item marker to appear inside the content flow.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body {
            font-size: 20px;
            text-align: center;
        }
 
        ul.x {
            list-style-position: inside;
            background-color: lightgreen;
            list-style-type: square;
        }
 
        ul.y {
            list-style-position: outside;
            list-style-type: square;
            background-color: lightgreen;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">GeeksForGeeks</h1>
 
    <p>List-style-position: inside</p>
 
    <ul class="x">
        <li>Database</li>
        <li>Computer Network</li>
        <li>Operating System</li>
    </ul>
 
    <p>List-style-position: outside</p>
 
    <ul class="y">
        <li>Database</li>
        <li>Computer Network</li>
        <li>Operating System</li>
    </ul>
</body>
</html>