In some cases, we are required to remove the bullets of unordered and ordered lists. The removal of the list bullets is not a complex task using CSS. It can be easily done by setting the CSS list-style or list-style-type property to none.
The list-style-type CSS property is used to set the marker (like a disc, character, or the custom counter style) of a list item element. This CSS property helps us to create the list without bullets. It can only be applied to those elements whose display value is set to list-item. The list-style-type property is inherited, so it can be applied to the parent element (like <ul> or <ol>) to make it apply to all list items.
By default, the ordered list items are numbered with Arabic numerals (1, 2, 3, etc.), and the items in an unordered list are marked with round bullets (•). The list-style-type CSS property allows us to change the default list type of marker to any other type such as square, circle, roman numerals, Latin letters, and many more.
If we set its value to none, it will remove the markers/bullets. Instead of removing the bullets in a list, we can replace them with the images. It makes the site visually more attractive. It can be done by using the list-style-image property.
Let's understand how to remove bullet points by using an example.
Example
In this example, we are using both ordered and unordered lists and applying the list-style-type property with the value none to remove the bullet points of the list items.
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- ol {
- list-style-type: none;
- font-weight: bold;
- font-size: 20px;
- }
- ul {
- list-style-type: none;
- font-weight: bold;
- font-size: 20px;
- }
- </style>
- </head>
- <body>
- <h2>Ordered list</h2>
- <ol>
- <li>List Item 1</li>
- <li>List Item 2</li>
- <li>List Item 3</li>
- </ol>
- <h2>Unordered list</h2>
- <ul>
- <li>List Item 1</li>
- <li>List Item 2</li>
- <li>List Item 3</li>
- </ul>
- </body>
- </html>
