How to Make Bullets Square on Unordered Lists using CSS
Table of Contents
Using CSS, you can change practically anything design-wise on a webpage.
One of the most common design changes you might need to make when working with unordered lists is changing the shape of the bullets.
By default, they are circles but some like to replace that with squares.
In this post, we'll learn how to replace circle bullets on unordered lists with squares using CSS.
How to Change Bullets on Unordered Lists to Squares
First, let's define some example HTML markup that we'll be using for this example:
HTML<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
This simple unordered list is just 3 items long, and it looks like this:
- HTML
Notice how the bullets are circles by default.
This is because by default, the list-style-type
property is set to disc
which is a circle:
CSSul {
list-style-type: disc;
}
Therefore, in order to change the bullets to squares, we need to change the list-style-type
property to square
:
CSSul {
list-style-type: square;
}
Now, let's see how this looks using the same HTML markup:
- HTML
- CSS
Now with our new list-style-type
property set to square
, the bullets are now squares, as we wanted.
Keep in mind that there are other values for this, including georgian
, decimal
, circle
, and more, each with their own unique look and effect.
Conclusion
In this post, we learned how to change the bullets on unordered lists to squares using CSS.
Simply change the list-style-type
property to square
and you're good to go.
Thanks for reading!
- Getting Started with TypeScript
- How to Install Node on Windows, macOS and Linux
- Getting Started with Solid
- Create an RSS Reader in Node
- Getting Started with Electron
- How to Serve Static Files with Nginx and Docker
- How to deploy an Express app using Docker
- How to Scrape the Web using Node.js and Puppeteer
- Getting User Location using JavaScript's Geolocation API
- Learn how to build a Slack Bot using Node.js
- Setting Up a Local Web Server using Node.js
- Getting Started with Moon.js