Purpose
This article describes two methods using CSS to change the bullet type / shape of the unorder list (i.e. <ul>) in HTML. In the examples below, the bullet is the character “+”. It can also be changed to an icon or image.
Approach 1
The critical technique here is to assign position relative to the ul element and position absolute to the bullet, and set the bullet position to left 0.
<style>
ul {
list-style-position: outside;
list-style: none;
position: relative;
margin-left: 50px; /* adjust if necessary */
padding: 0; /* adjust if necessary */
}
ul li {
padding-left: 30px; /* sets the space between bullet and text */
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 20px;
letter-spacing: 0.07em;
}
ul li::before {
position: absolute;
left: 0;
content: "+";
font-family: Montserrat;
font-size: 20px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.07em;
color: #3afc6e;
}
</style>Approach 2
Use the CSS “list-style-type” property.
For example:
ul {
list-style-type: "+";
}Alternatively, use the “list-style” property, which is the shorthand for these 3 properties in order:
For example:
ul {
list-style: '+' outside none;
padding-left: 40px; /* required to display bullets */
}
ul li {
padding-left: 10px; /* space between bullet and text */
}