How can I increase the bullet size in a li?

Question

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

Answer 1

You can also do use this: its works for me

li::marker{
   content:"\25A0" 
   font-size: 1.5rem
   color: black;
   vertical-align: bottom;
}

 

Answer 2

IE8+ does scale the bullets but not for every font size.
My fix is based on the fact the bullets for Verdana are larger than for Arial. I use css to set Verdana for li, at the same time I add extra spans around li's contents to keep the original font. Also, as Verdana can makes the lines higher, I may need to use line-height to make up for that, but that depends on the browser.
Also I can use bigger font size for li to make the bullets even larger, then I'll have to use still smaller line-height.

ul {
    font: 12px Arial;
}
ul li {
    font-family: Verdana;
    line-height: 120%;
} /* font-size: 14px; line-height: 100%; */
ul li span {
    font: 12px Arial;
}

<ul>
    <li><span>item 1</span>
    <li><span>item 2</span>
</ul>

Answer 3

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.

Answer 4

Internet Explorer doesn't seem to natively support sizing of the bullets from list-style-type with font-size as Firefox and Chrome appear to. I do not know if this is a known problem or bug.

There are workarounds, but sometimes an image is the quickest and more widely supported "fix".