By default, all browsers set font size to the <ul> element's bullet . But something, we need to increase or decrease the bullet's font size.
How to increase bullet size using css. #
So, in this article, we will look at how to change the unordered list's bullet size using css.
Example : How to change bullet font size using css.
#
<style>
ul{
list-style: circle;
}
li::marker {
color: red;
font-size: 2em;
}
</style>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
</ul>
Try it Yourself »
Comments (2)
How to increase bullet size in HTML
<style>
ul {
list-style-type: disc;
font-size: 24px;
}
</style>
This method involves using a CSS image as the bullet instead of the default HTML bullet. You can then resize the image to the desired size. Here's an example of how to do this:
<style>
ul {
list-style-type: none;
}
li {
list-style-image: url('bullet.png');
}
</style>
This code will replace the default HTML bullet with a bullet image named bullet.png