How to Add Non-Default Bullets to an HTML Page
Default bullets in HTML are shaped like small, black discs, but you can use alternative bullet settings or even create your own bullets. Custom bullets come in images or HTML special characters. These two options each require their own CSS technique that turns off regular CSS bullet points altogether. The method for images removes the default bullets and adds the image bullets as backgrounds for list items. The method for special characters, such as double arrows, adds them before every list item tag.
Other People Are Reading
Instructions
-
-
1
Create the HTML bullet list if you still need one:
<ul id=”nondefault”>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
</ul>Add a class name to the bullet list's “<ul>” tags if it does not already have one. Use a unique but meaningful name.
-
2
Open the style sheet for your website in Notepad or a code editor. If your website does not have one, write your CSS between a pair of “<style>” tags in the head of the HTML code:
<style type=”text/css”>
</style>If your HTML does not yet contain the previous code, add it between the “<head>” tags.
-
-
3
Write a style rule for your bullet list, targeting it by its ID name:
#nondefault {
} -
4
Set the “list-style-type” property in the style rule:
#nondefault {
list-style-type: square;
}You can use any of the following options: circle, disc, square. The default is “disc.”
-
5
Set the “list-style” to “none” if you want to use an image bullet. Write a second style rule for the list items inside the bullet list and set their backgrounds to the image bullet, adding some left-side padding to push the text over:
#nondefault {
list-style: none;
}
#nondefault li {
background: url('path/to/bullet.png') center left no-repeat;
padding-left: 10px;
}Change the path inside “url()” to that of your image bullet file. The bullet will be vertically centered and positioned on the left of the list item's text.
-
6
Turn off “list-style” if you want to use HTML special characters for bullets. Create a new style rule that adds the special character before every list item:
#nondefault {
list-style: none;
}
#nondefault li:before {
content: “\00BB”;
padding-left: 10px;
}The “content” that goes before each list item is not coded using a regular HTML special character code. You must use hex equivalent codes. For example, if a special character chart shows that a left-pointing double arrow is “AA” in hex, then its code for “content” is “\00AA”.
-
1
