CSS
How to add square bullet points in CSS?
This article will teach you How to add the square blue points with the help of CSS.
By default when we add an unordered list, list items will be displayed in a round bullet format although we have the option to change this format to a square bullet. This is what we will exactly learn in this article.
With the help of CSS property, we can easily change the square bullet icon.
How to add square bullet points in CSS?
A square bullet can be added by CSS property list-style-type: square;.
This CSS style has to be added to li element that is the child of ul.
We can even change the bullet icon to a circle, upper-roman, or lower-alpha.
Let’s look at the code for adding a square bullet.
CSS :-
ul > li {
list-style-type: square;
}
HTML :-
<ul>
<li>This is list item 1 with square bullet.</li>
<li>This is list item 2 with square bullet.</li>
<li>This is list item 3 with square bullet.</li>
<li>This is list item 4 with square bullet.</li>
<li>This is list item 5 with square bullet.</li>
</ul>
Output :-
In the CSS code, We have created a list-style-type property and given it a square value, which will tell the browser to display the bullet points in square format.
In the HTML code, we have created an unordered list with some list items.
In the Output image, it can be seen that bullet icons are displayed in square format.
Recap
With the help of a practical exam, we have learned how to add square bullet points by adding a CSS style list-style-type: square;.
Adding a square bullet will give a unique look to the list items.
Now You can go ahead and try this example by yourself and see the results.
