Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Increase size of list-style-bullet type

Tags:

Is there a way to increase the size of just the bullet list-style-type using CSS? I don't want to increase the size of the bullet text, just the bullet type. I can't use images or JavaScript either. It has to be something I can embed inside <style> tags within the <head> tag.

like image 659
Chris22 Avatar asked Dec 09 '11 19:12

Chris22


People also ask

How do I increase the size of a bullet in CSS?

It is possible to change the font size of your li> by wrapping it in a span or other tag, then to change the size of the bullet by resetting the content of your li>. When using em units, the size of the 'li' bullet can be adjusted proportionally. A list item bullet can be customized by using CSS.

How do you increase the size of a bullet in HTML?

The size of a bullet is defined by the browser, font, and font size. Although you can sometimes increase the size of the font to increase the bullet size, a better solution is to use an image as a bullet.


1 Answers

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.

like image 157
bookcasey Avatar answered Oct 03 '22 19:10

bookcasey