Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 23 Apr, 2021
Geek Week

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 –

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>

Output – 




My Personal Notes arrow_drop_up
Recommended Articles
Page :