3 Ways to Remove & Replace Bullets from an HTML List Using CSS (Tutorial)

HTML has two types of lists, order (OL) and unordered (UL). By default each list item as a circle placed to the left of the item.

checklist-chalboardThe default bullets can be replaced with other native options or completely removed. You can even change the UL bullet to a custom image or icon.

Changing the Native Bullet Icon

You can chose one of the default bullet styles by changing the list-style-type property.

The built-in values are :

  • square
  • disc
  • circle
  • decimal
  • none

These are just a few, really the most popular, of the available named options.

bulleted list with decimal and leading 0

As you can see from the screenshot there are many other named options. Many change the bullet to a native specific symbol.

For example by changing the list-style-type to devanagari the bulleted changes to something 'native' to India and Nepal.

There are many cultural specific choices you can make. The list is a bit too long to cover here.

You can also use lower and upper-cased Roman numerals, by choosing lower-roman and upper-roman.

You can also choose upper-alpha and lower-alpha to use upper and lower case lettering, for a more outline format.

bulleted list with devanagari

Using an Emoticon Bullet

A pretty neat trick modern browsers allow is the use of emoticon codes. This means you can apply their codes to display them as bullets.

For example, the thumbs up emoticon code (a code point or ASCII code) is '\1F44D'. You can get the code of your desired or favorite emoticon at Emojipedia.org.

I love pancakes, and the pancake code is \1F95E.

bulleted-list-pancake-emoticon

However, it does not seem like setting the list-style-type consistently supports using emoticon codes.

But don't fear you can still use an emoticon as your bullet!

The ::before pseudo element can be used to customize the bullet with an emoticon.

li:before {
content: '\1F95E';
margin-left: -20px;
margin-right: 10px;
}

You will need to set the default list-style-type to 'none'.

You will also need to position the emoticon. In the example I moved it to the left 20 pixels and added a 10 pixel right margin. This should make it look like a real bullet.

Changing the Bullet to an Image

There is another list style property available, list-style-image. When used it overrides the list-style-type value.

It works like setting the background-image style. Use the url method, passing the url to the image you want as your bullets.

li {
list-style-image: url(img/iphone.png);
}

There is nothing else you need to do because the image is applied with default spacing.

bulleted-list-iphone-bullets

You do need to make sure the image is bullet sized appropriate or you will get some overlapping issues.

If you want to use an 'oversized' image you will need to make appropriate spacing style changes to the list items.

ul{
margin-left: 40px;
list-style:none;
}

li{
   padding: .3em 0 1em 40px;
   background-image: url(img/large-bullet.png) no-repeat;
}

Wrapping Things Up

As you can see there are many options available to customize a list's bullets. There are native choices, but they could be boring.

You can add more visual value to your lists by using none-standard icons that are available, including culture specific values.

You can also apply custom images and emoticons to give you more visual appeal.

Don't feel like you are restrictied to just the default boring bullets, get creative and make your lists stand out!

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel