How to create bullets using <li> elements ?

We know that, whether it may be an ordered list or unordered list they come along with a numbering.

It may be:

  • Bullets
  • Squares
  • Decimal
  • Roman etc.

There are numerous options that we can use, but the question comes what property does this depend upon?

In CSS, for tags like <ol> and <ul>, there is a property called list-style-type.

Approach: The list-style-type property determines whether bullets, squares, or decimal etc come with li elements. To change or understand how it impacts the HTML is to use CSS targeting the selector <ul> or <ol>.

Syntax: CSS targeting <li> elements:



ol {
    list-style-type: decimal
}
ul {
    list-style-type: disc
}    

Let’s understand with examples:

 
  1. The default list-style-type for ordered list is Decimal and unordered is Disc. As evident from the above code.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content=
                "width=device-width">
        <title>Lists</title>
      </head>
      <body>
        <p>Ordered List:</p>
        <ol>
            <li>Eggs</li>
            <li>Bacon</li>
            <li>Leeks</li>
        </ol>
        <p>Unordered List:</p>
        <ul>
            <li>Coriander</li>
            <li>Basil</li>
            <li>Onion</li>
        </ul>
      </body>
      </html>

      chevron_right

      
      

    • Output:

      With the default styling, <ol> tag comes with Decimal and <ul> comes with Disc/Bullets as defined in CSS above.

      From here we understand how bullets come to <li> elements, but we can also change them to something else as well.

  2. Now we know from where bullets come in list elements, we can change it accordingly. Let’s set it to Roman Numerals in Ordered List and Square in Unordered List.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content=
              "width=device-width">
        <title>Lists</title>
        
        <style>
          ol{
            list-style-type: upper-roman
          }
          ul{
            list-style-type: square
          }
      </style>
      </head>
        
      <body>
        <p>Ordered List:</p>
        <ol>
            <li>Eggs</li>
            <li>Bacon</li>
            <li>Leeks</li>
        </ol>
        <p>Unordered List:</p>
        <ul>
            <li>Coriander</li>
            <li>Basil</li>
            <li>Onion</li>
        </ul>
      </body>
      </html>

      chevron_right

      
      

    • Output:
      Roman Numeral and Squares in ordered and unordered list respectively.
    • Here we can clearly see bullets/disc are replaced with square and decimals with Roman Numerals.

Complete Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content
         ="width=device-width">
  <title>Lists</title>
</head>
  
<body>
  <p>Ordered List:</p>
  <ol>
      <li>Eggs</li>
      <li>Bacon</li>
      <li>Leeks</li>
  </ol>
  <p>Unordered List:</p>
  <ul>
      <li>Coriander</li>
      <li>Basil</li>
      <li>Onion</li>
  </ul>
  <p>Ordered List:</p>
  <ol style="list-style-type:
            upper-roman;">
    <li>Eggs</li>
    <li>Bacon</li>
    <li>Leeks</li>
  </ol>
  <p>Unordered List:</p>
  <ul style="list-style-type:
                  square;">
    <li>Coriander</li>
    <li>Basil</li>
    <li>Onion</li>
  </ul>
</body>
</html>                    

chevron_right


Output:

Using both Default and Custom Inline CSS

Using both Default and Custom Inline CSS

Similarly, we can change the list-style-type to numerous types:

  1. upper-alpha
  2. lower-alpha
  3. none
  4. circle
  5. and many more….

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.