How to control size of list-style-type disc in CSS?

Since I don’t know how to control only the list marker size with CSS and no one’s offered this yet, you can use :before content to generate the bullets:

li {
    list-style: none;
    font-size: 20px;
}

li:before {
    content:"ยท";
    font-size:120px;
    vertical-align:middle;
    line-height:20px;
}

Demo: http://jsfiddle.net/4wDL5/

The markers are limited to appearing “inside” with this particular CSS, although you could change it. It’s definitely not the best option (browser must support generated content, so no IE6 or 7), but it might be the easiest – plus you can choose any character you want for the marker.

If you go the image route, see list-style-image.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)