Increase size of list-style-bullet type

Might not work in old version of IE.

li:before{ content:'\00b7'; font-size:100px; }

Demo

For IE6:

Without javascript or images, I would recommend putting a <span>&#183;</span> in the beginning of every list item and styling that.


I have had to do something similar. My method was to add a span tag around the text within the li:

<li><span>Item 1</span></li>
<li><span>Item 1</span></li>

Then you can increase the font-size of you li and reduce the font size of your span:

li {
  font-size: 20px;
}
li span {
  font-size: 14px;
}

You may need to adjust line-heights and margins to accommodate for the extra li sizing. But this method will also allow you to colour the bullets separate from text.

Tags:

Css

Html Lists