In case you do not want to wrap the content in your <li>s with <span>s, you can also use :before like this:
ul {
list-style: none;
}
li {
position: relative;
padding-left: 15px;
line-height: 16px;
}
li:before {
content: '\2022';
line-height: 16px; /*match the li line-height for vertical centered bullets*/
position: absolute;
left: 0;
}
li.huge:before {
font-size: 30px;
}
li.small:before {
font-size: 10px;
}
Adjust your font sizes on the :before to whatever you would like.
<ul>
<li class="huge">huge bullet</li>
<li class="small">smaller bullet</li>
<li class="huge">multi line item with custom<br/> sized bullet</li>
<li>normal bullet</li>
</ul>