I have always “not loved” the giant circle that appears by default for a list style type of “disc”. If you’d like to use a middot instead, which stands for middle-dot, change your CSS as follows:
li:before {
content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
}
li {
list-style:none;
text-indent: -.5em; /* you can vary this to your liking */
}
The above will work on any browser supporting the :before and :content psuedo-elements. Read more about psuedo-elements at w3schools.com. I believe nowadays any browser out there supports these (proof: caniuse.com).
Please be aware the list styling code above is not a real list style and therefore will not look good on nested lists.
I could also mention for those that may not know you can use the html code · anywhere in your code (html, not css) to output a · . Note when you wish to output content in CSS using :content you have to use a “CSS entity” equivalent. Chris Coyier of css-tricks.com wrote a nice post a few years ago about CSS content. Plus, here’s a Entity Conversion Calculator if you’d like to see what values you need for your CSS :content output.