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:

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

Rigby

i'm asking about some fix ... – Rigby

yes i would like to make the bullets larger like firefox – Rigby

Does this answer your question? Customize list item bullets using CSS – Magda

Answer 1

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.

Daily

it works fine in ie8 but not in ie7, cuz before doesn't work in ie7 – Rigby

@user964104: Yep. However, your question includes The bullets in IE8... – Daily

@alex; use hex value for bullet in your css. It's better because in some cases symbols is not working. – Bly

@sandeep: I'd use \2022 in that case. – Daily

Good idea. I would add a vertical-align:bottom; in the before selectors to make the bullet looking better. – Nephritis

It's an idea I like if you want a different char as a list bullet. It won't work in the event that you'd like an ordered list to have larger fonts. In that event, adding a div in the li with different/default font values. – Becka

Answer 2

You can also do:

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

Infertile

code is working but ; is missing after content:"\25A0" and font-size: 1.5rem – Nicolella

Answer 3

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

Concentric

Answer 4

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>

Seventy