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 Svelte
- Create an RSS Reader in Node
- How to deploy a .NET app using Docker
- How to deploy a Deno app using Docker
- How to deploy a Node app using Docker
- Getting Started with Handlebars.js
- Getting User Location using JavaScript's Geolocation API
- Creating a Twitter bot with Node.js
- Using Push.js to Display Web Browser Notifications
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up Stylus CSS Preprocessor
- Using Axios to Pull Data from a REST API