Search code examples
csssizehtml-listslistitem

Customize list item bullets using CSS

Is it possible to change the size of an <li> element's bullet?

Take a look at the code below:

li {
    list-style: square; /* I want to change the size of this squared bullet. */
}

I can't seem to find any way to achieve that.

Solution

  • You mean altering the size of the bullet, I assume? I believe this is tied to the font-size of the li tag. Thus, you can blow up the font-size for the LI, then reduce it for an element contained inside. Kind of sucks to add the extra markup - but something like:

    li {font-size:omgHuge;}
li span {font-size:mehNormal;}

    Alternately, you can specify an image file for your list bullets, that could be as big as you want:

    ul{
  list-style: square url("38specialPlusP.gif");
 }

    See: http://www.w3schools.com/css/css_list.asp