Increase size of list-style-bullet type

B

7

28

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.

Bully answered 9/12, 2011 at 19:40 Comment(0)

P

31

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.

Profound answered 9/12, 2011 at 19:49 Comment(10)

+1 great example (the vertical-align:middle was actually CRUCIAL here. nice)! also insted of "\00b7" can use "•" :) – Sadesadella 9/12, 2011 at 20:3

I generally use the escaped hex values, as I've had some trouble before with using the symbol. For example, this: span:before{content:""";} doesn't work, but this: span:before{content:"\0022";} does. – Profound 9/12, 2011 at 20:14

Thanks, bookcasey. Excellent solution, although I can't use :before since its for an IE6 only website. – Bully 9/12, 2011 at 20:24

Without javascript or images, with support needed for IE6, I would recommend putting a <span>·</span> in the beginning of every list item and styling that. – Profound 9/12, 2011 at 20:29

Thanks bookcasey. Yeh, thats the answer. post it so I can award you the points. it's ugly but it will work... ;) just wanted to know if there was cleaner way of styling the bullet type. Thanks everybody – Bully 9/12, 2011 at 20:34

The real bummer is that you have to support IE6. :-) I reflected the new solution in my answer. – Profound 9/12, 2011 at 20:39

Wow. I've never heard of an IE6 ONLY website. So for those on other browsers, do you have a pop up with a link to legacy download of IE6? – Doughboy 3/10, 2013 at 1:7

@Doughboy at the time, the company had customers who could have been using IE6, so we had to support it. Glad those days are over :) – Bully 5/3, 2015 at 22:9

unfortunately 00b7 isn't round.. becomes obvious if you increase the font size a lot. – Quiles 2/2, 2016 at 3:8

I don't think this completely solves the problem. This changes the line height for the first line only. This is a problem if you have a multiple line item. Example: jsfiddle.net/1yjcg59c – Souvenir 23/2, 2016 at 20:29

S

10

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.

Selfdeceit answered 20/3, 2015 at 13:18 Comment(2)

This works nicely for styling the bullets in emails since you can use in-line styles for them. Oh the horror of HTML emails! :) – Chiropractic 4/4, 2017 at 15:13

Simple and nice solution that allows you to easily manipulate the color of the bullets. – Stowell 11/11, 2021 at 10:48

C

9

To increase the size of the bullet you can use

li::marker 
{
    font-size: 2rem;
    font-weight: bolder;
}

and to change bullet character, the content property will work

li::marker 
{
    content: '\2746';
    font-size: 2rem;
    font-weight: bolder;
}

Colombia answered 25/1, 2021 at 1:17 Comment(1)

Good answer! But font-weight: bolder; doesn't seem to change anything – Bushweller 2/8 at 0:8

N

0

When you say you can't use images, do you mean you can't edit the li tags to add images, or that you can't use an image at all?

On the li elements, you can set the list-style-image property.

li {
 list-style-image: url('/imagepath.png');
}

This can still go in your head tag without editing the markup of the list.

Nuthouse answered 9/12, 2011 at 19:48 Comment(1)

Found this #7563844. I'll look more into it. Although I can't use javascript either. It's a really old app for special use. – Bully 9/12, 2011 at 20:29

X

0

no way that I'm aware of.

but you could fake it by using :before

ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}

Xanthe answered 9/12, 2011 at 19:49 Comment(1)

Thanks, Kae. It's for an IE6 site so can't use before – Bully 9/12, 2011 at 20:24

H

0

put any background color for the (ex: .menu li a )tag and add padding for that you will get like a box then border-radius and then for ( .menu li ) apply padding for left and right for spacing... (explained in reverse order)

#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;}
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;}

Hotheaded answered 20/12, 2012 at 20:41 Comment(0)

I

0

Was looking for a solution to this too and found that if you nest a p inside li, you can style the bullets and bullet text separately.

<div>
  <ul>
    <li><p>Hello</p></li>
  </ul>
</div

div ul li {
 /*this will style the bullets*/
}

div ul li p {
/*this will style the text*/
}

Illuminator answered 4/4, 2017 at 23:4 Comment(0)

Recommended topics

Hot tags