To hide the bullet point (or marker) of a list item (<li>
) in CSS, you can use the list-style-type
property and set its value to none
. This will remove the bullet point for unordered lists (<ul>
) and the number for ordered lists (<ol>
).
Here's how you can do it:
For an unordered list (<ul>
):
ul.no-bullet {
list-style-type: none;
}
Then, in your HTML:
<ul class="no-bullet">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
For an ordered list (<ol>
):
If you want to hide the numbers in an ordered list:
ol.no-number {
list-style-type: none;
}
Then, in your HTML:
<ol class="no-number">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Using list-style
shorthand property:
The list-style
property is a shorthand for setting multiple list-related properties at once. To hide the bullet or number, you can use:
ul.no-bullet, ol.no-number {
list-style: none;
}
This will remove the default bullet points or numbers from the lists. If you want to further customize the appearance of lists, you can explore other values for the list-style-type
property or use the list-style-image
property to set custom images as list markers.