How to Set the Content as a Counter in HTML?

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 Set the Content as a Counter in HTML?

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: html <!DOCTYPE html> <html> <head> <style> ul { list-style-image: url(

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 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 s

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 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

Onsen UI CSS Component Textarea in List Item

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Lists are used to store data or information on web pages in ordered or unordered form. Onsen UI CSS Component Textarea in

How to prevent line breaks in the list of items using CSS?

The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element

How to move Flex Items to the Right in Tailwind CSS ?

Aligning flex items to the right within a flex container refers to positioning the child elements (flex items) towards the right-hand side of the container when using the flexbox layout in CSS. This alignment can be achieved through various techniques or Tailwind CSS utility classes. Table of Conten