How to Remove Bullets from Unordered Lists in HTML
By default, browsers will render unordered lists using bullets next to each list item.
This is a sensible default as it makes it easy to read and understand each individual list item, however, with CSS, it's possible to change the bullet style, and even to remove the bullets altogether.
In this post, we'll learn how to remove the bullets from unordered lists in HTML using CSS.
How to remove the bullets from unordered lists in HTML using CSS
First, let's start with our example DOM. Here's an example unordered list:
HTML<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
As expected, there are bullets next to each list item, try it for yourself:
- HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Now, to remove the bullets, we will take advantage of the list-style-type
CSS property.
This is the property that allows us to change the bullet style, including removing the bullets altogether.
To remove the bullets, we can set the list-style-type
property to none
.
CSSul {
list-style-type: none;
}
Let's see how that looks together:
- HTML
- CSS
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
We can also use list-style
to remove the bullets as well:
CSSul {
list-style: none;
}
Conclusion
In this post, we looked at how to override the default browser behavior of rendering unordered lists using bullets by removing them using CSS.
You can remove them using the list-style-type
or list-style
properties, and setting their values to none
.
Hopefully, you've found this content useful. Happy coding!
- Getting Started with Svelte
- Getting Started with Electron
- How to Serve Static Files with Nginx and Docker
- How to Set Up Cron Jobs in Linux
- Using Puppeteer and Jest for End-to-End Testing
- Creating a Twitter bot with Node.js
- Building a Real-Time Note-Taking App with Vue and Firebase
- Getting Started with React
- Getting Started with Vuex: Managing State in Vue
- Setting Up a Local Web Server using Node.js
- How To Create a Modal Popup Box with CSS and JavaScript
- Getting Started with Moon.js