Using a Middot For List Style Type

list-style-type-middot

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:

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.

Tags: ,

Leave a Reply

Other tags used in my blog:

 (1)  (6)  (1)  (16)  (1)  (1)  (17)  (1)  (16)  (1)  (1)  (7)  (1)  (4)  (15)  (5)  (2)  (27)  (9)  (1)  (11)  (4)  (4)  (4)  (8)  (1)  (6)  (1)  (4)  (1)  (1)  (1)  (3)  (1)  (3)  (4)  (7)  (2)  (3)  (4)  (1)  (1)  (2)  (1)  (7)  (9)  (11)  (2)  (6)  (1)  (3)  (16)  (2)  (3)  (1)  (5)  (1)  (26)  (4)  (4)  (9)