How to define that the script is executed when the page has finished parsing ?

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>

Output :

How to define that the script is executed when the page has finished parsing ?

P

pall58183

Improve

Article Tags :

Similar Reads

How to set order of the flexible items inside the division element in CSS ?

The order property in CSS is used to specify the order of the flexible items inside the container. So to set the order of the flexible items inside the division element we use the order property and set the order of the items in CSS. In this article, we will learn how to set the order of the flexibl

How to add an image as the list-item marker in a list using CSS ?

The approach of this article is to learn how to add an image as the list-item marker in a list using list-style-image Property in CSS. Syntax: list-style-image: none | url | initial | inherit; Example: <!DOCTYPE html> <html> <head> <style> ul { list-style-image: url( "ht

How content property is used with :after selector in CSS ?

In this article, we will learn how content property is used with the :after selector in CSS. The :after selector is used to insert something after any selected element. And the content property is used to specify the content that will be inserted. So we use the content property in ::after selector t

How to specify the kind of marker to be used in the list in HTML5 ?

There are two types of lists in HTML, the first is an ordered list which is created using the <ol></ol> tag, and the second is an unordered list which is created using the <ul></ul> tag. Both of the lists should have a <li></li> tag to represent the data inside th

How to flex-start items at the beginning of the container using CSS ?

The flex-start value of the justify-content property allows you to place the items at the start of the container. The flex-start indicates the flex-direction while the start indicates the writing-mode direction. The children of the parent container are allowed to align at the start of the parent con

How to make whole area of a list item in navigation bar is clickable using CSS ?

Making the entire area of a list item in a navigation bar clickable enhances user experience, especially on mobile devices. By styling the <a> tag to occupy the full list item, users can easily interact with larger, more accessible touch targets. here are some methods that are described below:

How to Set the Content as a Counter in HTML?

The task is to set content as a counter. The CSS counters area unit â€œvariablesâ€ maintained by CSS whose values are also incremented by CSS rules (to track what variety of times they are used). Counters permit you to manage the appearance of content supported by its placement in the document. Way to

How to change the Order of Flex Items in Tailwind CSS ?

In Tailwind CSS, Changing the order of flex items allows you to create a responsive design and adjust the layout based on screens of different sizes or orientations. It applies to the elements under the flex container. Table of Content Using the order utility classUsing the flex-col-reverse utility

How to align item to the flex-end in the container using CSS ?

Aligning items to the flex-end in a container using CSS helps create visually appealing layouts by ensuring content is positioned at the end of the container. To align items to the flex-end within a container using CSS, apply the justify-items: flex-end; property to the container. This shifts items

How to put the text inside of a created icon?

The task is to put a text inside of a created icon. This post will go over some of the different ways in which you can put a text inside/over of a created icon/image(s). All of the discussed solutions follow a different presentation based on the same base idea i.e, to write/put the text over the ima