How to increase the size of a bullet in HTML

The size of a bullet is defined by the browser, font, and font size. Although you can sometimes increase the size of the font to increase the bullet size, a better solution is to use an image as a bullet.

To change a bullet to an image, use CSS (Cascading Style Sheets) on your page similar to the following example.

<style type="text/css">
ul {
 list-style: none;
}
ul li {
 background: url(https://www.computerhope.com/issues/pictures/bullet.gif) no-repeat top left;
 background-position: 0 5px;
 line-height: 1.5625;
 padding: 0 0 4px 30px;
 margin-left: 1em;
}
</style>

In the CSS code above, we are first setting the <UL> tags to show no list style, which removes the bullet from the unordered list. Next, we set "ul li" to only change the appearance of <LI> tags that are contained in the <UL> tags. In the first line of this section is the background, which points to the bullet image we are using in the example. All other lines are giving the padding and margin around the bullet.

After the code is created, any HTML (HyperText Markup Language) unordered list uses the bullet picture as the bullet.

Example HTML code

<ul>
 <li>First bullet example</li>
 <li>Second bullet example</li>
</ul>

Results of HTML code using the example CSS

• First bullet example
• Second bullet example