How to increase the size of a bullet in HTML

Updated: 06/04/2017 by Computer Hope

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 into an image use CSS 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 above CSS code 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 within 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 in this case are giving the padding and margin around the bullet.

Tip: You can also create a CSS class if you want to change a single bullet or a select group of bullets in a list.

After the code has been created any HTML unordered list will use 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

Additional information