Increase size of list-style-bullet type

2019-01-18 19:27发布

站内问答 / HTML/CSS
1140 6 5

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.

6条回答
We Are One
2楼-- · 2019-01-18 19:59

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;}
查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
3楼-- · 2019-01-18 20:00

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.

查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
4楼-- · 2019-01-18 20:00

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*/
}
查看更多
0人赞 添加讨论(0) 举报
在下西门庆
5楼-- · 2019-01-18 20:03

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;}
查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
6楼-- · 2019-01-18 20:16

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.

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
7楼-- · 2019-01-18 20:20

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)