-2

I searched at different sites but I can't get an actual solution for me. I want to decrease the size of bullet icon on li. But I don't wanna use the image at li:: before. Are there any ideas?

Harry
  • 23
  • 1
  • 6
  • Although linked question is about changing bullet's color however methods described there are mostly generic can be used to fully customize list bullets. – Mohammad Usman Jan 15 '18 at 07:45
  • 1
    See [this](https://stackoverflow.com/questions/6457059/customize-list-item-bullets-using-css) and [this](https://stackoverflow.com/questions/7563344/how-can-i-increase-the-bullet-size-in-a-li) also. – Mohammad Usman Jan 15 '18 at 07:52

3 Answers3

4

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>
DDan
  • 8,068
  • 5
  • 33
  • 52
3

A solution drafted by W3C is to set a custom list-style-type property.

This doesn't (yet) work on Safari or iOS Safari. The browser support of list-style-type: <string> covers all other modern browsers.

One solution is to set a custom list-style-type for the <ul>, e.g. the bullet symbol • (&bull;) which is smaller than the default list bullet. Even smaller is the middot symbol · (&middot;).

amp-what.com is a good resource for different symbols and also includes CSS codes for the symbols, e.g. the bullot symbol • is \2022 in CSS and the middot symbol · is \b7 in CSS.

.small-bullets {
  list-style-type: '\2022';
  padding-left: 32px;
}

.small-bullets li {
  padding-left: 8px;
}

.even-smaller-bullets {
  list-style-type: '\b7';
  padding-left: 32px;
}

.even-smaller-bullets li {
  padding-left: 8px;
}
<ul class="default">
  <li>Hello</li>
  <li>World</li>
</ul>

<ul class="small-bullets">
  <li>Hello</li>
  <li>World</li>
</ul>

<ul class="even-smaller-bullets">
  <li>Hello</li>
  <li>World</li>
</ul>
Matias Kinnunen
  • 7,828
  • 3
  • 35
  • 46
0

You can do this a couple of ways

li{list-style-type:none;}
li:before{content:'\00b7'; font-size:20px; line-height:24px; vertical-align:middle;}

Or

li{list-style-type:none;}

And add a 

<span>&#183;</span>

before the copy starts

Billy
  • 126
  • 1
  • 10