3 Ways to Remove & Replace Bullets from an HTML List and Create Custom Bullets Using CSS (Tutorial)
Last Updated -
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.
HTML lists feature bullets or some form of 'icon' for each list item. This helps make them stand out from regular content.But the built in options are rather bland.
And you may not want to use any bullet or icon to visually indicate list items, yet want to retain the semantic structure to your content.
The default bullets can be replaced with other native options or completely removed using CSS to manipulate the list-style-type property. You can even change the UL bullet to a custom image or icon.
Remember everything you see on a web page is a combination of markup and CSS. CSS is used to manipulate how the content structure (HTML) is rendered so it make more visual sense to the consumer.
This is why you can use the CSS list-style property along with adjusting margins and pseudo elements to create some amazing bulleted lists to engage your readers.
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.
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.
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.
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.
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!
