Increase Size of List-Style-Bullet Type

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>·</span> in the beginning of every list item and styling that.

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

I have always had good luck with using background images instead of trusting all browsers to interpret the bullet in exactly the same way. This would also give you tight control over the size of the bullet.

.moreLinks li {
    background: url("bullet.gif") no-repeat left 5px;
    padding-left: 1em;
}

Also, you may want to move your DIV outside of the UL. It's invalid markup as you have it now. You can use a list header LH if you must have it inside the list.

How can I increase the bullet size in a li?

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.

Customize list item bullets using CSS

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

Decrease List style bullet size using css?

You can do this, if you don't want to use image.

li {

    list-style: none;

}

li:before {

    content:"· ";

    font-size:24px;

    vertical-align:middle;

    line-height:20px;

}

<ul>

<li><a>Item 1</a></li>

<li><a>Item 2</a></li>

<li><a>Item 3</a></li>

<li><a>Item 4</a></li>

<li><a>Item 5</a></li>

</ul>

How to resize list style image

To get rid of the bullet points try using

list-style-type: none;

Just put it into the li or ul selector.

To resize the images i would just use an html tag instead of inserting the image using css. This way you can resize the image in the html tag.

<li>
<image src="../images/580b585b2edbce24c47b291a.png" alt="red star" width="yourWidth" height="yourHeight"</image>
</li>

CSS list-style-image size

You might would like to try img tag instead of setting 'list-style-image' property. Setting width and height using css will actually crop the image. But if you use img tag, the image will be re-sized to value of width and height.

How can I make a list-style-image scale with the list's font size, when we can't use glyph fonts?

I would approach solving this problem using a pseudo element before each li

Here is the markup

ul {

    list-style: none;

}

li {

    position: relative;

}

li:before {

    /*

    The desired width gets defined in two places: The element width, and background size.

    The height only gets defined once, in background size.

    */

    position: absolute;

    display: block;

    content: '\2022'; /* bullet point, for screen readers */

    text-indent: -999999px; /* move the bullet point out of sight */

    left: -.75em;

    width: .4em; /* desired width of the image */

    height: 1em; /* unrelated to image height; this is so it gets snipped */

    background-repeat: no-repeat;

    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=');

    background-size: .4em .7em;

    background-position: 0 .3em;

}

.small-list {

    font-size: 85%;

}

.large-list {

    font-size: 150%;

}

<ul class="small-list">

  <li>The goal is to make the chevron smaller for this list</li>

  <li>Specifically, just slightly smaller than capital letters, as stated.</li>

  <li>Nomas matas</li>

  <li>Roris dedit</li>

</ul>

    

<ul class="large-list">

  <li>And larger for this list</li>

  <li>Multiline list item<br>for testing</li>

  <li>Nomas matas</li>

  <li>Roris dedit</li>

</ul>

---

Related Topics