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 {
    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 I believe nowadays any browser out there supports these (proof:

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 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.