How can I increase the bullet size in a li?

user964104 picture user964104 · Sep 27, 2011 · Viewed 74.6k times · Source

The bullets in IE8 are so small, I tried changing the font-size, but that didn't work. Code:

<ul style="padding:0; margin:0; margin-left:20px;">
    <li>item 1</li>
    <li>item 2</li>
</ul>

Is there any way to do this without using an image for the bullet?

Answer

alex picture alex · Sep 27, 2011

You could do this in an IE8 conditional comment...

ul {
   list-style: none;
}

ul li:before {
   content: "•";
   font-size: 170%; /* or whatever */
   padding-right: 5px;
}

jsFiddle.

In IE7, you could prepend the bullet via JavaScript and style it accordingly.